多级项目的 jQuery 可排序答案

【问题标题】：jQuery Sortable for multiple level items多级项目的 jQuery 可排序
【发布时间】：2013-07-02 19:52:06
【问题描述】：

我想要一个具有多个级别的可排序列表。我用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 下。@ 987654331@元素只需要拖拽到父item1里面即可

有没有什么好的解决方案可以让两个级别同时排序

谢谢

【问题讨论】：

“我不能拖动 item1 .item2 元素下的子元素只需要在父 item1 内拖动”是什么意思？您是否只想限制将.items2 拖动到.item1 内？

标签： jquery jquery-ui jquery-ui-sortable nested-sortable

【解决方案1】：

你可以试试这样的：

<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();

【讨论】：

感谢 radek，但是 item1 也可以单独排序，并且 child 中的项目无法更改级别。对子项进行排序并限制在该父元素内
你是对的，它能够改变关卡，但是你想要的（只有父项能够进入子项）现在是固定的，它不是最好的代码但是您可以将其用作提示。在这里试试：jsfiddle.net/JKqrX

【解决方案2】：

这是您需要的行为吗？

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"
});

【讨论】：