jQuery 可对多级项目进行排序

Question

我想要一个具有多个级别的可排序列表。我尝试了 this 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 类 和 item1 类 的子级时，所有 item1和 item2 类将分配 draggable="true" 属性，我无法将子项拖动到 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"
});