I have such a drag-and-drop problem. I've used the library of dragula. I want to limit the number of elements going to the drop-area to two. Like this:
- if the number of elements is less than two in drop-area allow to add a new element from draggable;
- if there are two elements in drop-area, the user can add another element if only he/she returns one of the elements from drop-area to draggable.
Here is my code:
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>
Please help! Thank you in advance.
There are a variety of ways you can approach this based on the various events available in the dragula api.
You can use the
on('drop', callback)
event and check the length of children and usecancel()
.I've also used the on
('over')
event to change class on drop zone andon('cancel')
to remove it.There are lots of available events you can play with to make the UI more intuitive as needed