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 class和item1 class的孩子时，所有item1和item2类都会分配draggable="true"属性我无法将孩子拖到item1下。item2元素只需要在父item1内拖动

是否有任何好的解决方案可以同时对两个级别进行排序

由于

Answer 1

这是您需要的行为吗？

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

这个想法是让'item1'成为一个单独的sortable，它有子元素并且拥有所有'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();

jQuery可对多个级别的项目进行排序

2 个答案: