javascript - 嵌套 jQuery UI 可排序

Question

有没有一种方法可以嵌套 jQuery 可排序项？就像在嵌套容器中一样，不是嵌套列表意义上的。

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container">
    <div class="item"></div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="item"></div>
</div>

$('.container').sortable({
    connectWith: '.container'
});

http://jsfiddle.net/ExLqv/2/

该示例非常有效，但是当我删除嵌套容器时出现错误:

Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. 

我猜这是因为当拖动 container 时，它位于鼠标下方，所以当我放下它时，它会尝试将它放入自己内部。

我有一个解决方法，虽然不是很理想，所以问题仍然存在。

$('.container').sortable({
    connectWith: '.container:not(.ui-sortable-helper)',
    tolerance: "pointer",
    cursorAt: { left: -50 }
});

http://jsfiddle.net/ExLqv/8/

Answer 1

问题

当一个元素既是可排序容器又是可排序容器中的可排序元素时，jQuery 会丢失它。

解决方案

就像将有问题的对象包装在另一个元素中一样简单。 fiddle :http://jsfiddle.net/ExLqv/12/

“内部”容器是这样包装的:

<div class="container-wrapper">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

您避免了这个问题，因为内部容器本身不再是可排序容器和可排序容器中的可排序对象。相反，可排序对象现在是包装器。 请注意，类名 container-wrapper 只是为了说明。您可以删除它，它不会改变功能。

现在，我不知道这种方法是否比您自己提到的解决方法更适合您。我确实觉得有必要采取某种解决方法。很多人都遇到过这个问题，而且目前似乎普遍认为嵌套排序不支持此功能。如果我用谷歌搜索“jquery sortable nested”，根据结果判断，似乎有很多插件可以为您解决问题 :)