首先设置draggable="true"并监听dragstart、dragover、drop等事件，在dragover中调用preventDefault以允许放置，通过dataTransfer传递数据，实现任务项拖拽移动，并可添加样式反馈与AJAX持久化。
HTML5 的拖放（Drag and Drop）API 让用户可以通过鼠标直接拖动元素从一个位置移动到另一个位置，无需复杂的 JavaScript 插件。它原生支持，使用简单，非常适合实现文件上传、列表排序、拼图游戏等交互功能。下面通过一个实战案例，带你掌握如何使用 HTML5 拖放 API。
拖放基础：理解 drag 和 drop 事件
要启用拖放功能，需设置元素的 draggable="true"，并监听一系列拖放相关的事件：
- dragstart：拖动开始时触发，通常在此设置拖动的数据
- dragover：被拖动元素在目标区域上移动时持续触发，必须阻止默认行为才能允许放置
- drop：在目标区域释放拖动元素时触发，处理放置逻辑
- dragend：拖动结束（无论是否成功）后触发
注意：dragover 事件中必须调用 event.preventDefault()，否则 drop 事件不会触发。
实战案例：实现可拖动任务项的任务看板
我们来做一个简单的“任务看板”，包含“待办”和“已完成”两个列表，用户可以将任务从“待办”拖到“已完成”区域。
立即学习“前端免费学习笔记（深入）”；
待办任务
写页面结构添加拖放逻辑已完成
对应的 JavaScript 代码：
function allowDrop(event) {
event.preventDefault(); // 允许放置
}
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.dataset.id);
event.target.classList.add("dragging");
}
function drop(event) {
event.preventDefault();
const taskId = event.dataTransfer.getData("text/plain");
const taskElement = document.querySelector(`[data-id="${taskId}"]`);
// 将任务添加到目标列
event.target.appendChild(taskElement);
taskElement.classList.remove("dragging");
}
这里我们通过 dataTransfer.setData() 存储任务 ID，在 drop 时根据 ID 找到对应元素并移动。注意，append 操作会自动从原父元素移除节点。
增强体验：视觉反馈与数据持久化建议
为了让拖放更直观，可以在拖动过程中添加样式反馈：
.dragging {
opacity: 0.6;
transform: scale(1.05);
}
你还可以在 drop 后发送 AJAX 请求，将任务状态更新到服务器，实现数据持久化。例如：
fetch('/api/update-task', {
method: 'POST',
body: JSON.stringify({ id: taskId, status: 'done' })
});
对于更复杂的应用，如文件上传，可以监听 dragover 和 drop 事件中的 event.dataTransfer.files 来获取拖入的本地文件。
基本上就这些。HTML5 拖放 API 简单直接，虽然功能有限，但在大多数场景下足够使用，关键是理解事件流和数据传递机制。不复杂但容易忽略细节，比如忘记 preventDefault。
