ネストされたソート可能な要素、ロックの深さ

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

、これは動作します：http://jsfiddle.net/GMUbj/184/

：

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

は、私は同様のコードでこのフィドルを見つけました