8

有没有办法嵌套jQuery sortables？与嵌套容器一样，不是嵌套列表。

<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.

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

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

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

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

4

4 回答 4

9

问题

当一个元素既是可排序容器又是可排序容器中的可排序元素时，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只是为了说明。您可以删除它，它不会改变功能。

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

于 2014-01-09T15:25:51.267 回答
1

插件修复：

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;
            }
    }   
}
于 2014-10-06T05:51:46.240 回答
0

你可以试试！效果很好！

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

});
于 2017-03-07T03:00:16.360 回答
0

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

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

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

于 2015-10-01T19:09:35.563 回答