Question

我使用knockout-sortable.js让用户拖放项目给他们一个不同的顺序，但是当我有多个删除区域时我遇到了问题＆＃39;在我的页面上。我有嵌套集，所有这些集都是可排序的，但不可以互换。

我的代码：

    <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＆＃39;进入＆＃39; Blabla＆＃39;，导致错误。我怎样才能防止这种情况发生？

Answer 1

有几种方法可以解决这个问题。第一种是将connectClass传递给knockout-sortable为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>

这与第一种解决方案不同，它会阻止物品在视觉上离开盒子（如果这是你的愿望）。

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

1 个答案: