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

Question

Fiddle is here.

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

这些 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 链接 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>

希望这会对你有所帮助。