不能使div的相互之间的排序，但可以排序内他们

Question

Fiddle is here.

我有一个包含4个格的容器编辑元素。

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

希望这会帮助你。