jQuery UI Sortable - 不允许转移到子元素

Question

我正在使用 jQuery 的 UI 可排序对象，并创建了一个这种格式的 div 系统；

<div class='mainDiv'>
    <label>text: <input type='text' name='textbox' /></label>

    <div class='children'>
        <div class='mainDiv'>...</div>
        <div class='mainDiv'>...</div>
        <div class='mainDiv'>
            <label>text: <input type='text' name='textbox' /></label>
            <div class='children'>...</div>
        </div>
    </div>
</div>

div 可以有无数个子元素，我希望能够将所有 .mainDiv 拖放到它们的父框内，所以我使用了这个：

$(".mainDiv").parent().sortable({items: ".mainDiv", containment: "parent"});

但是，这允许将元素拖到其子级或兄弟级 .children div 中。我不想发生这种情况。我想将元素限制在其父元素内。

这里的任何帮助都会很热。

干杯

Answer 1

我设法这样解决它：

$(this).parent().sortable({
    items: '> li',
    axis: 'y',
    ...
});

在你的情况下，它应该适用于：

items: '> .mainDiv'

包含：“父级”不是必需的。

在我的例子中，我在之前的点击事件中启用了“可排序”，因为它更快。我认为如果将它绑定到“mousedown”事件会更容易。如果您动态创建树（例如 Ajax），我建议您使用“livequery”。