防止项目在其他(父/子)元素中"可放置"

Question

我使用knockout-sortable.js让用户拖放项目给他们一个不同的顺序,但是当我在我的页面上有多个"drop zone"时,我遇到了问题.我有嵌套集,所有这些集都是可排序的,但不可互换.

我的代码:

    <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传递给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>

与第一种解决方案不同,这将阻止物品在视觉上离开盒子(如果这是您的愿望).