防止项目在其他（父/子）元素中“可丢弃”

Question

我使用knockout-sortable.js让用户拖放项目给他们不同的顺序，但是当我有多个项目时遇到问题在我的页面上放置“放置区域”。我有嵌套，所有这些都是可排序的，但不是可互换。

我的代码：

<div class="sortable" data-bind="sortable: blueprint.pages"> 
      <tr><td>Blabla</td></tr> 
    </div> 

而在其他一些点：

<div class="sortable" data-bind="sortable: selectedPage().page_sections"> 
      <tr><td>Another blabla</td></tr> 
    </div> 

我现在可以只需拖放 '另一个布拉布拉' 到 'BLABLA'，导致错误。我怎样才能防止这种情况发生？

Answer 1

有几种方法去这个问题。第一种是通过在淘汰赛可排序的connectClass为虚假或空（或任何时候作为一个布尔表示，等于为false）：

<div class="sortable" data-bind="sortable: { data: blueprint.pages, connectClass: false }"> 
    <tr><td>Blabla</td></tr> 
</div> 

<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, connectClass: false }"> 
     <tr><td>Another blabla</td></tr> 
</div> 

您也可以通过，进入jQuery的，包容的选项：

<div class="sortable" data-bind="sortable: { data: blueprint.pages, options: { containment: 'parent' } }"> 
    <tr><td>Blabla</td></tr> 
</div> 

<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, options: { containment: 'parent' } }"> 
     <tr><td>Another blabla</td></tr> 
</div> 

这不像第一个解决方案，从视觉上留下箱（如果那是你的愿望）停止该项目。