Javascript 嵌套jqueryui排序表

有没有一种方法可以嵌套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'
});

我认为这是因为当拖动

容器时，它位于鼠标下方，因此当我将其放下时，它会尝试将其放在自身内部

我有一个工作，虽然不理想，所以问题仍然存在

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

问题

当元素既是可排序容器又是可排序容器中的可排序元素时，jQuery将丢失它

解决方案

就像将有问题的对象包装到另一个元素中一样简单。小提琴：

“内部”容器的包装方式如下：

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



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

现在，我不知道这种方法是否比你自己提到的解决方法更适合你。我确实觉得有必要采取某种变通办法。很多人都遇到过这个问题，而且似乎普遍认为嵌套排序表目前不受支持。如果我在谷歌上搜索“jquery sortable nested”（jquery sortable nested），从结果来看，似乎有很多插件为您解决了这个问题：）
插件修复：

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

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


Uncaught HierarchyRequestError:无法在“节点”上执行“insertBefore”：新的子元素包含父元素。
您可以尝试！它工作得很好

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

});

有趣的。。。是，我获得了
未捕获的HierarchyRequestError:未能在“节点”上执行“insertBefore”：新的子元素包含父元素。
问题在于
帮助程序
。您可能需要克隆帮助程序<代码>$（'.container'）.sortable（{connectWith:'.container'，helper:'clone'}），这当然需要一些调整。您好，欢迎来到StackOverflow。请给答案加上一些解释。
$('.container').sortable({
    helper:'clone',
    connectWith: '.container',

});