嵌套jQuery UI sortables

有没有办法让嵌套的jQuery可排序？ 与嵌套容器一样，不是嵌套列表。

 
 
 
 
 
 
 
 
 
 
 
 
 
 $('.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’容器包裹如下：

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

现在，我不知道这种方法对你来说是否比你自己提到的解决方案更好。 我确实觉得有必要解决某些问题。 很多人遇到了这个问题，似乎普遍认为嵌套的sortables目前不是支持的function。 似乎有一堆插件可以解决你的问题，如果我谷歌的’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. 

Answer 4

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

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