knockout.js - 防止项目在其他（父/子）元素中“可放置”

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>

我现在可以将“Another blabla”拖放到“Blabla”中，从而导致错误。我怎样才能防止这种情况发生？

Answer 1

有几种方法可以解决这个问题。第一个是将connectClass作为false或null（或任何等于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>

与第一个解决方案不同，这将阻止项目从视觉上离开盒子（如果这是您的愿望）。