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就会丢失它。

解决方案

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

'inner'容器包装如下：

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

您可以避免此问题，因为内部容器本身不再是可排序容器中的可排序容器和可排序对象。相反，可排序对象现在是包装器。请注意，classname container-wrapper 仅用于说明。您可以将其删除，但不会更改功能。

现在，我不知道这种方法对你来说是否比你自己提到的解决方法更好。我确实觉得有必要解决某些问题。很多人遇到了这个问题，似乎普遍认为嵌套的sortables目前不支持这个功能。似乎有一堆插件可以解决你的问题，如果我谷歌'jquery可排序嵌套'的结果判断：）

Answer 2

插件修复：

var sortable = $.widget("ui.sortable", $.ui.mouse, {
    _contactContainers: function(event) {   
            // never consider a container that's located within the item itself
            if($.contains(this.currentItem[0], this.containers[i].element[0]) || this.currentItem[0] === this.containers[i].element[0]) {
                continue;
            }
    }   
}

Answer 3

要创建嵌套可排序元素作为可排序容器和可排序元素，需要有一个帮助程序：clone和placeholder。排序时，检查位置占位符是否为0然后重新附加占位符以帮助拖动容器知道插回的位置并避免

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

这是关于小提琴的测试： http://jsfiddle.net/0umjf5tc/1/

Answer 4

你可以尝试一下！它完美无缺！

$('.container').sortable({
    helper:'clone',
    connectWith: '.container',

});

嵌套jQuery UI sortables

4 个答案: