I'm struggling with a drag-and-drop issue that involves limiting the number of elements in a drop-area to two. I am using the dragula library for this task:
- If there are fewer than two elements in the drop-area, allow adding a new element from the draggable;
- If there are already two elements in the drop-area, the user should only be able to add another element if they return one of the existing elements back to the draggable.
Below is the code snippet I have been working on:
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>