【问题标题】：dragover vs dragenter events of HTML5 drag & dropHTML5拖放的dragover vs dragenter事件
【发布时间】：2015-12-17 01:42:27
【问题描述】：

我想知道 HTML5 drag &drop 的 dragover 和 dragenter 事件的区别。

我不清楚区别。

【问题讨论】：

标签： html drag-and-drop

【解决方案1】：

dragenter 事件发生在您将某些东西拖入目标元素的那一刻，然后它会停止。 dragover 事件发生在您拖动某物直到放下它的过程中。

看这里：

$('.dropzone').on("dragover", function (event) {
    console.log('dragover');
});
$('.dropzone').on("dragenter", function (event) {
    console.log('dragenter');
});

现在看控制台：

如您所见，draenter 发生一次（当您将元素拖入目标时）。

但拖动事件每隔几百毫秒发生一次。

drag 和 dragstart 之间存在相同的区别，dragstart 发生一次，但 drag每隔几百毫秒发生一次。

【讨论】：

【解决方案2】：

基于dragenter 和dragover MDN 文档...

拖拉机

dragover 事件在选择元素或文本时触发拖到一个有效的放置目标上（每几百毫秒）。

dragenter

当拖动元素或文本选择时触发 dragenter 事件输入一个有效的放置目标。

当光标停留在元素上时，dragover 会在一小段延迟（我认为是每 350 毫秒）后触发。

【讨论】：

【解决方案3】：

dragenter:

dragenter 事件仅在拖动可拖动元素时触发，光标进入附有ondragenter 事件的DOM 元素区域.

dragover:

另一方面，dragover 事件在拖动可拖动元素时“不断”触发，并且光标恰好位于 DOM 元素区域内的屏幕上，该 DOM 元素具有ondragover 事件附在上面。

不同之处在于（在拖动时）当光标进入拖放区时，dragover 会不断触发（在鼠标移动时），而 dragenter 仅在光标“进入”时触发一次

演示：

function dragover(e) {
 console.log("drag over")
}

function dragenter(e) {
  console.log("drag enter!!!")
}

#target{
  width: 200px;
  height: 200px;
  background: lightyellow;
  border: 1px solid gold;
}

div[draggable]{
  width: 60px;
  height: 60px;
  background: red;
}

<div draggable="true">Drag Me</div>
<div id="target" ondragover="dragover(event)" ondragenter="dragenter(event)">Drop Zone</div>

【讨论】：