Jqueryのソート可能なアイテムが親または子のネストされたソート可能リストに移動しないようにする

Question

いくつかのアイテムを他のアイテムの下にネストすることができるアイテムをリストするページがあります。私は、レベルの外に落とさせることなく、レベルを超えてアイテムを並べ替えることができるようにしたい。構造は以下の通りです：

<div class="sub_items"> 
    <div class="item"> 
     <div>some item related stuff</div> 
     <div class="sub_items"> 
      <div class="item"> 
       <div>some item related stuff</div> 
       <div class="sub_items"> 
       </div> 
      </div> 
      <div class="item"> 
       <div>some item related stuff</div> 
       <div class="sub_items"> 
       </div> 
      </div> 
      <div class="item"> 
       <div>some item related stuff</div> 
       <div class="sub_items"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="item"> 
     <div>some item related stuff</div> 
     <div class="sub_items"> 
      <div class="item"> 
       <div>some item related stuff</div> 
       <div class="sub_items"> 
       </div> 
      </div> 
      <div class="item"> 
       <div>some item related stuff</div> 
       <div class="sub_items"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="item"> 
     <div>some item related stuff</div> 
     <div class="sub_items"> 
     </div> 
    </div> 
</div> 

だから私は、各レベルのアイテムをそのレベルでソートできるようにします。以下を使って、私はsub_itemsのすべてのリストをソート可能にすることができますが、上下に動かすことができますし、ネストされたアイテムはserializeを使用すると返されます（ネストされていない値）。

Answer 1

私はこの回答をオンラインで見つけたことはありませんでしたが、私が見た他のものに基づいて考え出しました。アイデアは、jqueryセレクタを使うことで、マッチを1つのレベルに制限することができます（特別なライブラリを使用しない）。

は動作しません：

$('.sub_items').sortable({ 
    placeholder: "ui-sortable-placeholder", 
    update: function(e, ui) { 
     console.log($(this).sortable('toArray')); 
    } 
}); 

作品：

$('.sub_items').sortable({ 
    items: ">.item", 
    placeholder: "ui-sortable-placeholder", 
    update: function(e, ui) { 
     console.log($(this).sortable('toArray')); 
    } 
}); 

を直接一度に処理されている.sub_itemsの子孫であるだけのアイテムにソート可能な項目を制限しているこれは何やっています、 $（ '。sub_items> .item'）を実行するのと同じように、1つのレベルの深い項目だけが選択されます。