Несколько контейнеров с Dragula, но ограничивают предметы только их контейнером

Question

У меня есть страница с несколькими контейнерами-драгулами. Контейнеры 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> 

ЯШ:

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

Спасибо

Answer 1

Вы можете указать options.accepts метод, чтобы проверить, что элемент перетаскивается в том же контейнере, он пришел.

Например:

ЯШ:

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