如何使用dragula来限制要掉落区域的元素数量

Question

我有这样一个拖放问题。我用过德拉古拉的图书馆。我想将进入放置区域的元素数量限制为两个。像这样：

• 如果放置区域中的元素数量少于两个，则允许添加来自draggable的新元素
• 如果放置区域中有两个元素，则用户可以添加另一个元素，只要他/她将其中一个元素从放置区域返回到draggable即可

这是我的代码：

function $(id) {
return document.getElementById(id);
}
dragula([$('draggable'), $('drop-area')], {
revertOnSpill: true
});

#chart, #chart tr {
border: solid 3px;
width: 1000px;
border-collapse: collapse;
font-family: "Almarai";
font-size: 20px;
}
#chart {
position: relative;
left: 200px;
}
#chart #drop-area {
height: 100px;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
padding: 1em;
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
user-select: none !important;
}
.gu-transit {
opacity: 0;
}
.gu-mirror {
opacity: 1;
}

<script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
<table id="chart">
<tr>
<td id="drop-area">
</td>
</tr>
</table><br>
<div id="draggable">
<div id="a1">option 1</div>
<div id="a2">option 2</div>
<div id="a3">option 3</div>
<div id="a4">option 4</div>
<div id="text"></div>

请帮忙！提前谢谢。

Answer 1

根据dragulaapi中可用的各种事件，有多种方法可以实现这一点。

您可以使用on('drop', callback)事件并检查子项的长度，然后使用cancel()。

我还使用了on('over')事件来更改放置区上的类，使用on('cancel')来删除它

有很多可用的事件，你可以根据需要使用，使UI更加直观

function $(id) {
return document.getElementById(id);
}
const dropContainer = $('drop-area');
const drake = dragula([$('draggable'), dropContainer], {
revertOnSpill: true
});
drake.on('drop', function(el, target, source, sibling) {
if (target.matches('#drop-area') && target.children.length > 2) {
drake.cancel()
}
});
drake.on('cancel', function(el, container, source) {
console.log('Cancelled')
dropContainer.classList.remove('invalid')
})
drake.on('over', function(el, container, source) {
if (container !== source && container.matches('#drop-area')) {
// moved from source to dropzone
if (container.children.length === 2) {
container.classList.add('invalid')
}
}
})

#chart,
#chart tr {
border: solid 3px;
width: 1000px;
border-collapse: collapse;
font-family: "Almarai";
font-size: 20px;
}
#drop-area.invalid {
background: yellow;
color: red
}
#chart {
position: relative;
left: 200px;
}
#chart #drop-area {
height: 100px;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
padding: 1em;
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
user-select: none !important;
}
.gu-transit {
opacity: 0;
}
.gu-mirror {
opacity: 1;
}

<script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
<table id="chart">
<tr>
<td id="drop-area">
</td>
</tr>
</table><br>
<div id="draggable">
<div id="a1">option 1</div>
<div id="a2">option 2</div>
<div id="a3">option 3</div>
<div id="a4">option 4</div>
<div id="text"></div>