jQuery可排序用於多個級別的項目

Question

我想要一個具有多個級別的可排序列表。 我在這個Blog上嘗試過，因為它很容易地描述了事情

但是當我嘗試多級操作時它不起作用:(

這是我需要的結構

<div class='sortable'>
    <div class='item1'>aa</div>
    <div class='item1'>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'>ee</div>
</div>

和腳本

$(".sortable").sortable();
$(".item1").sortable();

當我將sortable()分配給sortable class和item1 class子item1 class ，所有item1和item2類都將分配draggable="true"屬性，而我無法將childs拖動到item1下。 item2元素只需要在父item1內拖動

有什么好的解決方案可以使兩個級別同時排序

謝謝

Answer 1

這是您需要的行為嗎？

http://jsfiddle.net/JKqrX/1/

想法是使“ item1”成為一個單獨的可排序項，該子項具有子元素並具有所有“ item1”的句柄，以便您可以對兩個級別進行可比較的排序。 您可以在處理程序中放置任何圖像或拖動圖標進行拖動

//HTML
<div class='sortable'>
    <div class='item1'><span class="handle">handle   </span>aa</div>
    <div class='item1 has-child'>
        <span class="handle">handle   </span>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'><span class="handle">handle   </span>ee</div>
</div>

//JS
$(".has-child").sortable({
    items: ".item2"
});
$(".sortable").sortable({
    handle: ".handle"
});

Answer 2

您可以嘗試類似的方法：

<div class='sortable'>
    <div class='item1'>aa</div>
    <div class='item3'>
        <div class='item2'>bb</div>
        <div class='item2'>cc</div>
        <div class='item2'>dd</div>
    </div>
    <div class='item1'>ee</div>
</div>

$(".item3").sortable({
    connectWith: ".sortable"
});
$(".sortable").sortable({
    connectWith: ".item3"
}).disableSelection();