嵌套可排序元素，锁定深度答案

【问题标题】：Nested sortable elements, lock depth嵌套可排序元素，锁定深度
【发布时间】：2011-06-22 22:27:59
【问题描述】：

我很难尝试“锁定”嵌套可排序元素的深度，以便它们只能在其直接兄弟之间“上下”排序。

我以为我已经做到了，但我仍然可以将子项从其父项中“拉出”，反之亦然。

var $sort = $( '#outside-wrapper' ).sortable({

    axis  : 'y',
    items : '.item',
    start : function( event, ui ) {
        // dynamically set the containment to the item's direct parent once started
        $sort.sortable( 'option', 'containment', ui.item[0].parentNode );
    }

});

这是标记要求的示例；

<div class="item">

    <div class="item"><!-- content --></div>

    <div class="item">

        <div class="item"><!-- content --></div>

        <div class="item">

            <div class="item"><!-- content --></div>    

        </div>

    </div>

</div>

感谢任何指针！

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

非常感谢jQuery UI: Only allow sortable within its own parent level, and not above or below。

最终结果是；

sort.call( $( '#outside-wrapper' )[0] );

function sort() {
    $( this )
        .sortable( 'destroy' )
        .sortable({ items : '> .item' })
        .find( '> .item' )
        .each( sort );
}

destroy 在那里，因为每当我添加到 DOM 时我都必须重新绑定。似乎有点递归密集，但正如他们所说......它有效。

更新： IE (7 & 8) 射弹呕吐。似乎拖动事件正在冒泡，所有父节点都随之而来，彼此移动指数距离......

是的，很高兴看到它。不过不是我的那杯茶。用handler: '> .handler' 修复，即不要使用可排序对象作为处理程序！

【讨论】：

【解决方案2】：

我要添加一个答案，即使它被标记为已回答：

有一个更简单但不那么漂亮的解决方案。如果您在孩子上调用 sortable，他们仍然是一个组：

<div class="items">
    <div class="one"> x </div>
    <div class="one"> x </div>
    <div class="one"> 
        <div class="items">
            <div class="one"> x </div>
            <div class="one"> x </div>
            <div class="one"> x </div>
        </div>
    </div>
</div>

在上面的代码中，这将起作用：

$('div.items, div.items').sortable({/* ... */});

我发现这个小提琴有类似的代码：http://jsfiddle.net/GMUbj/184/

【讨论】：