javascript - 如何使用 Dragula 限制要放置区域的元素数量？

Question

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

• 如果放置区域中的元素数量少于两个，则允许从可拖动中添加新元素；
• 如果放置区域中有两个元素，用户可以添加另一个元素，前提是他/她将放置区域中的一个元素返回到可拖动。

这是我的代码：

  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>

请帮忙！先感谢您。

标签： javascripthtmlcssdragula

Answer 1

根据 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', 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>