在现代 Web 应用中，我们越来越追求更具沉浸感和灵活性的用户交互方式。而 HTML5 提供的原生拖拽（Drag and Drop）API，正是实现这一目标的利器之一。
无论是实现拖拽上传、元素排序、拼图游戏，还是拖放式页面编辑器，这项功能都能帮你构建出更加直观、自然的交互体验。
什么是 HTML5 拖拽（Drag and Drop）？
HTML5 的拖拽 API 允许用户通过鼠标拖动页面上的元素，并将其释放到某个区域或其他元素上，形成“拖动-放下”的交互链条。
这项功能无需第三方库，浏览器原生支持，并通过一系列事件和属性控制拖拽行为的各个阶段。
实现拖拽的三大核心要素
要构建一个完整的拖拽流程，需要了解以下三个基本组成：
1. 设置元素可拖动
要让一个 HTML 元素能够被拖动，必须添加 draggable="true" 属性：
<div draggable="true">拖我一下</div>
默认情况下，大多数元素并不是可拖动的（除了 <img>、链接 <a> 等少数元素）。
2. 拖拽相关事件流程
HTML5 定义了一整套拖拽事件，涉及拖动的开始、进行、结束，以及与目标区域的交互。
拖动元素： dragstart → drag → dragend
目标区域： dragenter → dragover → drop → dragleave
| 事件名 | 描述 |
|---|---|
dragstart | 拖拽开始（设置拖拽数据） |
drag | 拖拽过程中持续触发（不常用） |
dragend | 拖拽完成后触发（不管是否成功） |
dragenter | 拖拽目标元素进入 drop 区域 |
dragover | 拖拽元素悬停在目标区域上（需要阻止默认事件以允许 drop） |
dragleave | 拖拽元素离开 drop 区域 |
drop | 元素放下时触发（获取数据） |
注意：dragover 事件必须调用 event.preventDefault()，否则 drop 事件不会触发！
3. 利用 DataTransfer 传递数据
在拖拽开始时，你可以使用 DataTransfer 对象在拖拽元素与目标区域之间传递数据：
// 在 dragstart 中设置数据
e.dataTransfer.setData("text/plain", "hello");
// 在 drop 中获取数据
const data = e.dataTransfer.getData("text/plain");
你也可以传递 JSON 字符串、ID、HTML 等，只需确保 MIME 类型一致即可。
实战案例：将方块拖动到目标区域
让我们通过一个完整的示例来理解拖拽的工作流程。
HTML + CSS + JavaScript 示例
<head>
<style>
#drag-box {
width: 100px;
height: 100px;
background-color: coral;
margin: 20px;
text-align: center;
line-height: 100px;
font-weight: bold;
cursor: move;
}
#drop-zone {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 3px dashed #aaa;
display: flex;
align-items: center;
justify-content: center;
color: #888;
font-size: 16px;
}
</style>
</head>
<body>
<div id="drag-box" draggable="true">拖动我</div>
<div id="drop-zone">放到这里</div>
<script>
const dragBox = document.getElementById("drag-box");
const dropZone = document.getElementById("drop-zone");
dragBox.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", "drag-box");
});
dropZone.addEventListener("dragover", (e) => {
e.preventDefault(); // 必须阻止默认行为以启用 drop
});
dropZone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
if (id === "drag-box") {
dropZone.appendChild(dragBox);
dropZone.style.backgroundColor = "#d0ffd0";
dropZone.textContent = "成功放置！";
}
});
</script>
</body>
效果说明
- 用户可以点击并拖动方块
- 当拖到灰色区域时放开，方块就移动成功
- 页面文字与样式更新，反馈操作完成
拓展应用场景
HTML5 拖拽的用途非常广泛，可以与其他组件、框架结合，完成更多复杂交互：
- 拖拽上传文件：与
<input type="file">联动 - 拖拽排序：列表元素自由排序
- 拖拽构建器：页面组件自由拼装
- 拖拽式游戏：拼图、对战拖放操作
- 可视化工具：图形拖拽连接、流程图编辑
小结
HTML5 的原生拖拽 API 提供了一种简洁、高效的方式，增强网页交互性。虽然功能相对底层，但足以支撑许多常见的拖放需求。
官方文档
