防止项目在其他(父/子)元素中“可丢弃" [英] Prevent items to be 'droppable' in other (parent/child) elements

问题描述

我使用基因敲除-sortable.js来允许用户拖放项目以赋予它们不同的顺序，但是当我的页面上有多个放置区域"时，我遇到了问题.我有嵌套集，所有嵌套集都是可排序的，但不是可互换的.

I use knockout-sortable.js to let the user drag and drop items to give them a different order, but I'm experiencing problems when I have multiple 'drop zones' on my page. I have nested sets, all of which are sortable, but not interchangeable.

我的代码:

    <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"中，从而导致错误.如何防止这种情况发生?

I can now just drag and drop 'Another blabla' into 'Blabla', causing errors. How can I prevent this from happening?

推荐答案

有两种方法可以解决此问题.第一种是传入以false或null(或当表示为布尔值时等于false的任何值)来对连接类进行剔除排序:

There are a couple ways to go about this. The first is to pass in to knockout-sortable the connectClass as false or null (or anything that is equal to false when expressed as a boolean):

<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:

You can also pass, into jQuery, the containment option:

<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>

与第一种解决方案不同，这将阻止该项目从视觉上离开盒子(如果您愿意的话).

This, unlike the first solution, will stop the item from visually leaving the box (if that's your desire).

这篇关于防止项目在其他(父/子)元素中“可丢弃"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！