嵌套可排序元素，锁定深度 [英] Nested sortable elements, lock depth

问题描述

我很难尝试锁定"嵌套可排序元素的深度，以使它们只能在其直接同级兄弟之间上下"排序.

I'm having a hard time trying to 'lock' the depth of nested sortable elements, so that they can only sort 'up and down' among their direct siblings.

我以为我已经有了它，但是我仍然可以将子项从其父项中抽出"，反之亦然.

I thought I had it with this, but I can still 'pull' child items out of their parent and vice versa.

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

});

这是标记要求的示例；

Here's an example of the markup requirements;

<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 UI:仅允许在自己的父级，并且不高于或低于.

最终结果是；

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

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

销毁就在那儿，因为每当我添加到DOM时我都必须重新绑定.似乎有点递归密集，但正如他们所说的那样...

The destroy's in there, since I had to rebind whenever I added to the DOM. Seems a little recursively intensive, but as they say... it works.

更新:呕吐IE(7和8)抛射物.似乎拖动事件正在冒泡，所有父节点都随之发生，彼此之间呈指数距离移动.

UPDATE: IE (7 & 8) projectile vomited. Seemed the drag event was bubbling up, and all the parent nodes went with it, moving exponential distances from one another...

是的，很高兴看到它.虽然不是我的茶.已通过handler: '> .handler'修复，即不要将可排序对象用作处理程序！

Yeah, nice to look at it. Not my cup of tea though. Fixed with handler: '> .handler' i.e. don't use the sortable object as the handler!

这篇关于嵌套可排序元素，锁定深度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！