jquery - 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'

遏制：不需要“父母” 。

In my case, I enable "sortable" during a previous click event, as it is faster. I think its easier if you bind it to the "mousedown" event. If you create the tree dynamically (e.g.Ajax), I recommend you to use "livequery".