将元素拖到另一个元素上时的 Html/JavaScript 事件答案

【问题标题】：Html/JavaScript event when element is dragged onto another element将元素拖到另一个元素上时的 Html/JavaScript 事件
【发布时间】：2019-06-11 04:42:06
【问题描述】：

我有一个 HTML 网格，当元素 A 被拖到另一个元素 B 上时，我想在网格内重新排列元素 A 和 B。这应该在删除元素之前发生。

当元素 A 被拖到元素 B 上时，是否可以捕获元素 B 上的事件？我不想等到用户放下元素，当一个元素被拖到它上面时我需要重新排列。

【问题讨论】：

ondragenter....

标签： javascript jquery html angular

【解决方案1】：

这是dragenter 事件。

ondragstart = e => e.dataTransfer.setData('text', '');
// set the class when entering over #target
target.ondragenter = e => target.classList.add('draghover');
// remove when leaving
target.ondragleave = e => target.classList.remove('draghover');

#target {
  width: 250px;
  height: 250px;
  border: 1px solid;
}

#target.draghover {
  background: #CCC;
}

<div draggable="true">drag me over the target</div>
<div id="target"></div>

【讨论】：

【解决方案2】：

是的，有一个 ondrag() 事件处理程序，它在拖动元素时触发。如果你想在拖动动作的一开始就触发一个函数，还有 ondragstart() 事件处理程序。

如果您想在元素被拖动元素（但不被放下）时捕捉，有 ondragenter() 触发一次，因为元素被拖动进入元素，还有ondragover()，当一个元素被拖到元素上时会重复触发。

【讨论】：