html5拖拽api实现需明确四要素：设draggable="true"启用拖源，dragover中preventdefault()激活投放区，datatransfer传id等标识，drop中解析并更新dom或状态，辅以光标、缩略图等体验优化。
HTML5 拖拽 API 实现网页元素拖放交互，核心是明确“谁可拖”“谁可接”“数据怎么传”“样式怎么反馈”四件事。不需要第三方库，现代浏览器原生支持，关键在事件配合和默认行为控制。
让元素变成可拖拽源
默认只有 <img>、<a></a> 等少数元素可拖，普通 <div>、<code><span></span> 必须显式开启：
- 给目标元素添加
draggable="true"属性，例如：<div draggable="true" data-id="item-1">任务一</div> - 确保它有可见内容或明确宽高，否则无法触发拖拽
- 可在
dragstart中设置携带的数据，比如：event.dataTransfer.setData('text/plain', 'item-1')
把容器变成有效投放区
目标区域（如看板列、文件夹框）默认不接受拖入，必须主动“允许”：
- 监听目标元素的
dragover事件，并立即调用event.preventDefault()—— 这一步必不可少，否则drop永远不会触发 - 可选：在
dragenter时加高亮样式（如边框变蓝），dragleave时还原，提升视觉引导 - 在
drop事件中取消默认行为，并读取数据：const id = event.dataTransfer.getData('text/plain')
完成放置逻辑与数据传递
拖放不是视觉动画，本质是 DOM 结构或状态的变更：
-
dragstart存的是标识（ID、类型、JSON 字符串等），不是 DOM 节点本身 -
drop中根据获取到的 ID 查找对应元素，执行移动（appendChild）、复制（cloneNode）或更新状态（如修改data-status） - 若需拖动后清空源位置，记得在
drop后手动移除原节点，或用 CSS 隐藏 - 建议在
dragend或drop后调用event.dataTransfer.clearData()，避免重复使用残留数据
增强体验的实用细节
基础功能跑通后，用户是否愿意用，取决于细节是否自然：
- 拖拽过程中鼠标光标应有反馈：在
dragstart设置effectAllowed = 'move'，在dragover设置dropEffect = 'move' - 自定义拖拽图像（如半透明缩略图）可用
setDragImage()，但注意图像需已加载完成 - 移动端不支持桌面级拖拽，务必保留
<input type="file">或点击按钮作为降级方案 - 多个目标区域共存时，用
event.target准确识别当前投放位置，避免误操作
