jQuery Sortable 不适用于嵌套元素

Question

我正在尝试让 jQuery 可排序以重新排列 div 嵌套层次结构。我的 div 可以有子 div，可以在父级之外排序或拖动，以便它们成为兄弟姐妹等。

我有一个例子： http://jsfiddle.net/xu7xN/

基本上就是这样的布局：

<div id="root">
    <div class="box">
        <div class="header">box a</div>
        <div class="content">
            <div class="box">
                <div class="header">box b</div>
                <div class="content"></div>
            </div>
            <div class="box">
                <div class="header">box c</div>
                <div class="content"></div>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="header">box d</div>
        <div class="content"></div>
    </div>
</div>

使用 connectWith 选项，我应该能够：

• 将“box a”拖到“box d”下方，“box a”的所有子项都将随之移动
• 将“box d”拖到“box a”中，使其成为一个孩子
• 将“box b”拖到#root，使其成为根节点

我认为这很容易，但我想错了，我在做什么明显错了吗？

Answer 1

这篇博文看起来涵盖了一个类似的问题并解决了它。它基于列表而不是 div，但代码仍应适用 jQuery UI nested sortables