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

Question

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

如果拖放区的元素个数少于两个允许添加来自 draggable 的新元素；
如果drop-area中有两个元素，如果只有he/she returns其中一个元素从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>

请帮忙！提前谢谢你。

Answer 1

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

您可以使用 on('drop', callback) 事件并检查 children 的长度并使用 cancel().

我还使用 on('over') 事件更改拖放区上的 class 并使用 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', function(el, container, source) {
  console.log('Cancelled')
  dropContainer.classList.remove('invalid')

})

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

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

How can I limit the number of elements going to drop-area using dragula?

html

javascript

css

dragula