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'

遏制:“父级”不是必需的。

就我而言，我在上一次点击事件期间启用“可排序”，因为它更快。我认为如果将它绑定(bind)到“mousedown”事件会更容易。如果您动态创建树(例如 Ajax)，我建议您使用“livequery”。