在前端开发中，拖放（Drag and Drop）是很常见的交互方式。它可以让用户通过拖动鼠标将元素从一个位置移动到另一个位置，或者将数据从一个应用程序拖放到另一个应用程序中。在拖放过程中，涉及到两个事件：DragEnter 和 DragOver。这两个事件都与拖放操作相关。
DragEnter 事件
当被拖动的元素进入目标元素的可拖放区域时，会触发 DragEnter 事件。在这个事件处理程序中，通常会执行一些操作来准备接受被拖动的元素，比如高亮目标区域、改变光标形状等。需要注意的是，如果被拖动的元素在目标元素内部移动，也会反复触发 DragEnter 事件。因此，在 DragEnter 事件处理程序中，需要判断当前是否已经进入了目标元素，避免重复执行相同的操作。
下面是一个示例代码，演示了如何使用 DragEnter 事件实现目标元素的高亮显示效果：
---- ----------- ------------- ------ ------- ------ ------- --- ------ ------------- -------- ----- ------ - ---------------------------------- ------------------------------------ --------------- - ---------------------------- - ------------ -------------------- - ------ --- ---------
在这个示例代码中，当被拖动的元素进入目标元素的可拖放区域时，会触发 DragEnter 事件。在 DragEnter 事件处理程序中，我们通过改变目标元素的背景色和透明度来实现高亮显示。
DragOver 事件
当被拖动的元素在目标元素内部移动时，会不断触发 DragOver 事件。在这个事件处理程序中，通常会执行一些操作来反映当前的拖动状态，比如更新目标元素的位置、禁用默认的拖放行为等。需要注意的是，如果不阻止默认的拖放行为，被拖动的元素可能会被浏览器自动打开或下载，而不是被正确地拖放到目标元素中。
下面是一个示例代码，演示了如何使用 DragOver 事件实现目标元素的定位效果：
---- ----------- ------------- ------ ------- ------ ------- --- ------ ------------- -------- ----- ------ - ---------------------------------- ----------------------------------- --------------- - ----------------------- -- --------- ----------------- - ------------- - ----- ---------------- - ------------- - ----- --- ---------
在这个示例代码中，当被拖动的元素在目标元素内部移动时，会不断触发 DragOver 事件。在 DragOver 事件处理程序中，我们通过更新目标元素的位置来实现定位效果。需要注意的是，为了防止默认的拖放行为，我们需要调用 event.preventDefault() 方法。
总结
DragEnter 和 DragOver 事件是拖放操作中非常重要的两个事件。在实际开发中，我们可以使用它们来实现各种拖放效果，比如高亮显示、定位等。同时，也需要注意到它们可能会反复触发，并且需要防止默认的拖放行为，以保证拖放操作的正确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14361