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

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

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

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

这是标记要求的一个例子;

感谢任何指针！

Answer 1

好吧，非常感谢jQuery UI：只允许在自己的父级别内进行排序，而不是在上面或下面 。

最终的结果是;

 sort.call( $( '#outside-wrapper' )[0] ); function sort() { $( this ) .sortable( 'destroy' ) .sortable({ items : '> .item' }) .find( '> .item' ) .each( sort ); } 

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

更新： IE（7和8）射弹呕吐。 似乎拖拽事件冒泡了，所有父节点都随之而来，彼此之间的指数距离……

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

Answer 2

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

有一个更容易，不太漂亮的解决方案。 如果您在孩子身上调用可排序的，他们仍然是一个群组：

 
 
 x 
 
 x 
 
 
 
 x 
 
 x 
 
 x 
 
 
  

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

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

我找到了类似代码的小提琴： http ： //jsfiddle.net/GMUbj/184/