防止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'）只会选择一层深的项目一样。