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

Posted 2023-05-09

【中文标题】如何使用 Dragula 限制要放置区域的元素数量？

【英文标题】：How can I limit the number of elements going to drop-area using dragula?

【发布时间】：2021-07-19 07:45:59

【问题描述】：

我有这样一个拖放问题。我用过 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>

请帮忙！提前谢谢你。

【参考方案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>