带有 Dragula 的多个容器，但将项目限制在它们的容器中答案

【问题标题】：Multiple containers with Dragula, but restrict items to only their container带有 Dragula 的多个容器，但将项目限制在它们的容器中
【发布时间】：2017-01-23 11:18:20
【问题描述】：

我有一个包含多个 Dragula 容器的页面。容器是ul，里面有一堆li。我希望用户能够在他们的容器中重新排序li，但我不希望将一个容器中的li 拖到另一个容器中。现在我可以将每个li 拖到任何ul。如何将 li 限制在其原始容器中？

html:

<ul id="first">
  <li>for first group only</li>
  <li>for first group only</li>
  <li>for first group only</li>
</ul>

<ul id="second">
  <li>for second group only</li>
  <li>for second group only</li>
  <li>for second group only</li>
</ul>

<ul id="third">
  <li>for third group only</li>
  <li>for third group only</li>
  <li>for third group only</li>
</ul>

js:

var first = '#first';
var second = '#second';
var third = '#third';

var containers = [
  document.querySelector(first),
  document.querySelector(second),
  document.querySelector(third)
];

dragula({
  containers: containers,
  revertOnSpill: true,
  direction: 'vertical'
});

谢谢

【问题讨论】：

标签： javascript dragula

【解决方案1】：

你可以指定一个options.accepts 方法来检查元素是否被拖到它来自的同一个容器中。

例如：

js:

dragula({
  containers: containers,
  revertOnSpill: true,
  direction: 'vertical',

  accepts: function (el, target, source, sibling) {
      // accept drags only if the drop target is the same
      // as the source container the element came from
      return target == source;
  }
});

【讨论】：

谢谢，你救了我。