Nest jQuery UI sortables

Nest jQuery UI sortables

本文关键字：sortables UI jQuery Nest      更新时间：2023-09-26

有没有办法嵌套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/

问题

当元素既是可排序容器

又是可排序容器中的可排序元素时，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>

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

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

插件修复： 

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

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

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

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

你可以试试！它工作得很好！

$('.container').sortable({
    helper:'clone',
    connectWith: '.container',
});
相关文章：