javascript - 无法使 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。

我为 paragraph 提供了不同的 className 作为 .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>

希望对您有所帮助。