如何使用 dragula 限制进入放置区域的元素数量？

问题描述

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

• 如果放置区域的元素数量少于两个，则允许添加 来自 draggable 的新元素；
• 如果 drop-area 中有两个元素，用户可以添加另一个元素，只要他/她将 drop-area 中的一个元素返回到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>

请帮忙！提前致谢。

解决方法

根据 dragula api 中可用的各种事件，您可以通过多种方式来解决这个问题。

您可以使用 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',container,source) {
  console.log('Cancelled')
  dropContainer.classList.remove('invalid')

})

drake.on('over',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>