I have a page with multiple dragula containers. The containers are ul's with a bunch of li in them. I would like users to be able to reorder li's in their containers, but I don't want the li from one containers to be draggable to another container. Right now I can drag every li to any ul. How do I restrict the li's only to their original containers?

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

Thank you

I have a page with multiple dragula containers. The containers are ul's with a bunch of li in them. I would like users to be able to reorder li's in their containers, but I don't want the li from one containers to be draggable to another container. Right now I can drag every li to any ul. How do I restrict the li's only to their original containers?

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

Thank you

• javascript
• dragula

1 Answer 1

You could specify an options.accepts method to check that the element is dragged to the same container it came from.

For example:

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