JavaScript HTML5 拖拽 API 详解：事件机制与完整实现流程

作者：流萤时间：2026-10-26 14:02:53浏览：168

本文详细解析 JavaScript 中基于 HTML5 的鼠标拖动事件机制。从设置元素的 draggable 属性开始，逐步讲解 drag、dragstart、dragenter、dragleave、dragover 及 drop 等核心事件的触发时机与处理逻辑。通过代码示例演示如何监听事件、阻止默认行为以及实现元素跟随与放置功能，帮助开发者掌握完整的拖拽交互实现方法。

前言

实现鼠标拖动功能，首先需要利用 HTML5 的 draggable 属性。在目标标签中将该属性设置为 true，即可允许用户对该元素执行拖动操作。

<body>
    <!-- 设置draggable为true -->
    <div draggable="true"></div>
</body>

drag 事件

该事件在元素被拖动过程中持续触发。利用此特性，可以实时获取鼠标位置，从而实现让另一个元素跟随鼠标移动的效果。

<body>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("drag", (params) => {
        console.log("drag事件触发");
    })
</script>

dragstart 事件

此事件仅在拖动动作开始时触发一次。开发者可以利用它来执行拖动前的预处理逻辑，例如记录初始状态或准备数据。

<body>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragstart", (params) => {
        console.log("dragstart事件触发");
    })
</script>

dragenter 事件

当正在被拖拽的元素进入监听元素范围时，该事件被触发。需要注意的是，监听器必须绑定在目标元素（即被进入的元素）上，此时 event.target 指向该目标元素。此事件常用于在拖拽鼠标悬停于某元素时，对该元素进行视觉或逻辑上的变更。

<body>
    <div style="background-color: blue;"></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragenter", (e) => {
        console.log("dragenter事件触发");
        e.target.style.backgroundColor = "green"
        console.log("颜色改变");
    })
</script>

dragleave 事件

与 dragenter 相反，当鼠标拖拽元素移出监听元素范围时触发。通常用于移除 dragenter 中应用的样式或状态。

<body>
    <div style="background-color: blue;"></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragleave", (e) => {
        console.log("dragleave事件触发");
        e.target.style.backgroundColor = "green"
        console.log("颜色改变");
    })
</script>

dragover 事件

该事件的作用范围限制在监听元素内部。只要拖拽鼠标位于监听元素上方，即使鼠标静止不动，该事件也会不断触发。这常用于在元素内部实现跟随鼠标的视觉效果。

<body>
    <div style="background-color: blue;"></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragover", () => {
        console.log("dragover事件触发");
    })
</script>

drop 事件

drop 事件必须与 dragover 配合使用。在 dragover 的回调中调用 event.preventDefault() 以允许放置操作。当鼠标在监听元素内部松开并完成拖拽时，将触发同样绑定在该元素上的 drop 事件。

<body>
    <div style="background-color: blue;"></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragover", (e) => {
        console.log("dragover事件触发");
        e.preventDefault()
    })
    div.addEventListener("drop", () => {
        console.log("drop事件触发");
    })
</script>

dragend 事件

此事件需绑定在被拖拽的元素上。当拖拽操作结束（无论是否成功放置）时触发。其使用场景与 drop 类似，但作用对象不同，用于清理拖拽结束后的状态。

<body>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragend", () => {
        console.log("dragend事件触发");
    })
</script>

总结

本文介绍了 JavaScript 鼠标拖动事件监听的使用方法以及实例效果演示。更多相关 js 鼠标拖动事件监听使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript将图片转换为Base64编码的两种途径

2026-11-05 16:43:05

怎么在 Vue 或 React 项目中正确集成 animate.js

2026-11-05 10:23:38

JS注册事件：addEventListener基础语法与参数详解

2026-11-05 08:44:56

JSP和JS的区别：运行环境与服务端/客户端职责解析

2026-11-04 23:34:36

pdf.js 官方下载地址：GitHub Release 获取预编译包

2026-11-04 23:07:27