HTML5拖放的dragover vs dragenter事件

Posted 2023-05-08

【中文标题】HTML5拖放的dragover vs dragenter事件

【英文标题】：dragover vs dragenter events of HTML5 drag & drop

【发布时间】：2015-12-17 01:42:27

【问题描述】：

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

我不清楚区别。

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