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

解决方案

就像将有问题的对象包装在另一个元素中一样简单。小提琴：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 只是为了说明。您可以删除它，它不会改变功能。

现在，我不知道这种方法是否比您自己提到的解决方法更适合您。我确实觉得某种解决方法是必要的。很多人都遇到过这个问题，并且似乎普遍认为嵌套排序不是目前支持的功能。如果我 google 'jquery sortable nested' 从结果来看，似乎有一堆插件可以为你解决问题：)

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

要创建嵌套的可排序元素作为可排序容器和可排序元素，需要有一个助手：克隆和占位符。排序时，检查位置占位符是否为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',

});