首先设置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 事件不会触发。
实战案例：实现可拖动任务项的任务看板
我们来做一个简单的“任务看板”，包含“待办”和“已完成”两个列表，用户可以将任务从“待办”拖到“已完成”区域。
立即学习“前端免费学习笔记（深入）”；
<div class="board"> <div class="column" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)"> <h3>待办任务</h3> <div class="task" draggable="true" ondragstart="dragStart(event)" data-id="1">写页面结构</div> <div class="task" draggable="true" ondragstart="dragStart(event)" data-id="2">添加拖放逻辑</div> </div> <div class="column" id="done" ondrop="drop(event)" ondragover="allowDrop(event)"> <h3>已完成</h3> </div> </div>
对应的 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。