I have such a drag-and-drop problem. I've used this 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 only return one of the elements from drop-area to the draggable and then replace it with another one
Here is my code:
<html>
<head>
<script src="https://rawgit.com/bevacqua/dragula/master/dist/dragula.js"></script>
<style>
#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;
}
</style>
</head>
<body>
<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>
<script>
function $(id) {
return document.getElementById(id);
}
dragula([$('draggable'), $('drop-area')], {
revertOnSpill: true
});
</script>
</body>
</html>