dragula js：如何限制 droparea 中的元素数量？

编程问答 2022-05-15

问题描述

我有这样的拖放问题。我用过这个dragula 库。我想将进入放置区域的元素数量限制为两个。像这样：

  • 如果放置区域的元素数量少于两个，则允许添加 来自 draggable 的新元素；
  • 如果drop-area中有两个元素，用户只能返回其中一个 从放置区域到可拖动的元素，然后将其替换为另一个

这是我的代码：

<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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drag-and-dropdragulahtmljavascript