帶有Dragula的多個容器，但僅限於其容器的項目

Question

我有一個帶有多個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' 
}); 

謝謝

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