无法使 div 在彼此之间排序，但可以对其中的元素进行排序

Question

我有一个包含 4 divs 的容器编辑器。

这些 div 中的每一个都应该可以相互排序。

它们还包含可排序的段落元素。我使用的 javascript 是这样的：

jQuery('.sortable').sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".sortable"
    });

我可以对段落进行排序，甚至可以将它们拖到 div 之外（这是正确的行为）。

但是我无法对 div 进行排序。当我尝试对 div 进行排序时，它们不可避免地会彼此混在一起或完全消失。

我该如何解决这个问题？

Answer 1

给你一个解决方案https://jsfiddle.net/xovnxags/1/

$('.sortable').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".sortable"
});

$('.psortable').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".psortable"
});

.sortable .row{
  background-color: yellow;
  border-style: dashed;
  border-width: 2px;
  margin-top:20px;
}
    
.sortable p {
  height:30px;
}

#editor {
  background-color:cornflowerblue;
  border-width:2px;
  border-style:dashed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

<div id="editor" class="sortable">

    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
</div>

您需要有两种排序方法，一种用于外部 div，另一种用于 paragraph。

我提供了不同的 className 到 paragraph 作为 .psortable。

更新解决方案 给你一个 jsfiddle link https://jsfiddle.net/xovnxags/2/

$('.sortable').sortable({
  placeholder: "ui-state-highlight",
  connectWith: ".sortable"
});

$('.psortable').sortable({
  placeholder: "ui-state-highlight",
  connectWith: ".sortable"
});

.sortable .row{
  background-color: yellow;
  border-style: dashed;
  border-width: 2px;
  margin-top:20px;
}
    
.sortable p {
  height:30px;
}

#editor {
  background-color:cornflowerblue;
  border-width:2px;
  border-style:dashed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

<div id="editor" class="sortable">

    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
    <div class="psortable row">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
    </div>
    
</div>

希望对您有所帮助。

无法使 div 在彼此之间排序，但可以对其中的元素进行排序

Can't make divs sortable between each other, but can sort elements within them

javascript

jquery

jquery-ui

jquery-ui-sortable