防止項目在其他（父/子）元素中「可丟棄」

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> 

這不像第一個解決方案，從視覺上留下箱（如果那是你的願望）停止該項目。