我有一个包含多个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'
});
谢谢
答案 0 :(得分:4)
您可以指定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;
}
});