使用“jQuery Ui Sortable”未捕获的 HierarchyRequestError答案

【问题标题】：Uncaught HierarchyRequestError with "jQuery Ui Sortable"使用“jQuery Ui Sortable”未捕获的 HierarchyRequestError
【发布时间】：2014-04-30 15:24:35
【问题描述】：

我尝试制作可排序的嵌套容器，但 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/

从红色容器中拖出一个绿色容器。您应该有以下 javascript 错误：Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

你知道这个问题吗？你有解决方案吗？是bug吗？

谢谢！

【问题讨论】：

您找到解决方案了吗？我碰到了它......我遇到了完全相同的问题。

标签： javascript jquery jquery-ui nested jquery-ui-sortable

【解决方案1】：

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

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

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

【讨论】：