防止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> 

所以我想項目的每個級別可排序在這一水平。通過使用以下內容，我可以使所有的子項目列表可排序，但是它們可以上下移動，並且在使用序列化時返回嵌套項目（其中我只希望返回給定級別的項目而不嵌套值）。

Answer 1

我從來沒有在網上找到過這個答案，但是根據我看到的其他東西計算出來。我們的想法是，通過使用jQuery選擇器，我們可以將匹配限制在一個深度級別（不使用特殊的庫）。

不起作用：

$('.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'）只會選擇一層深的項目一樣。