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

Question

Fiddle is here.

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

这些div中的每一个都应该可以在彼此之间进行排序。

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

if(!empty($path)){
  $path='<img src="/image/'.$image.'"/>';
} else {
  $path='<img src="/image/default.jpg"/>';
}

我可以对段落进行排序，甚至将它们拖到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＆amp;另一个用于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>

希望这会对你有所帮助。