未捕获的层次结构请求错误与"jQuery Ui Sortable"

Question

我尝试使可排序嵌套容器，但我有一个问题与jQuery UI可排序插件，我找不到一个合适的解决方案。

我简化了我的问题，下面是代码:

<div id="composition">
    <div class="aContainer">
        <div class="aContainer"></div>
    </div>
    <div class="aContainer"></div>
</div>
<script>
$("#composition").sortable({
    connectWith: ".aContainer"
});
$(".aContainer").sortable({
    connectWith: "#composition, .aContainer"
});
</script>
<style>
#composition
{
    padding: 15px;
    border: dotted 1px red;
}
.aContainer
{
    padding: 15px;
    border: solid 1px green;
}
</style>

您可以在这里尝试:http://jsfiddle.net/ekSxg/

将绿色容器拖出红色容器。Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node':新的子元素包含父元素。

你对这个问题有想法吗?你有解决办法吗?是bug吗?

谢谢!

Answer 1

要创建嵌套的可排序元素作为可排序容器和可排序元素，需要有一个助手:clone和占位符。排序时，检查位置占位符是否为0，然后重新添加占位符，以帮助拖动容器知道插入的位置，并避免错误

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

下面是关于小提琴的测试:http://jsfiddle.net/0umjf5tc/1/