使用Dragula实现多个容器，但限制物品仅在其容器内移动。

Question

我有一个页面上有多个Dragula容器。这些容器是带有许多

的

。我希望用户能够重新排序他们容器内的
• ，但我不希望一个容器中的
• 可拖到另一个容器中。现在，我可以将每个
• 都拖到任何
  中。如何限制
  • 只能在其原始容器中拖动？

    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'
    });
    

    谢谢你

- Loading...

Answer 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;
  }
});

- J. Michael Brown

---

谢谢，你救了我。 - moni sogani