Question

我很难尝试“锁定”嵌套可排序元素的深度，因此他们只能在他们的直接兄弟姐妹中“上下”排序。

我以为我有这个，但是我仍然可以从他们的父母那里“拉出”儿童用品，反之亦然。

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>

感谢任何指针！

Answer 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 );
}

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

更新： IE（7＆amp; 8）弹丸呕吐。似乎拖拽事件正在冒泡，所有父节点都随之而来，彼此之间的指数距离......

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

Answer 2

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

有一个更容易，不太漂亮的解决方案。如果您对孩子打电话进行排序，他们仍然是一个小组：

<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/

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

2 个答案: