HTML5原生拖拽需设置draggable="true"并监听dragstart、dragover（须preventDefault）、drop等事件，通过dataTransfer传递数据，注意移动端不支持。
HTML5 原生拖拽功能无需第三方库，靠 draggable 属性 + 一整套拖拽事件就能实现元素拖动和数据交换。关键不是“能不能拖”，而是“拖什么”和“往哪放”。
开启拖拽：设置 draggable 属性
只有显式声明 draggable="true" 的元素才可被拖动（默认为 false；文本、图片、链接等原生可拖动，但自定义 div、span 等必须手动开启）：
<div draggable="true" data-id="item-1">拖我走</div> <img src="icon.png" draggable="true" alt="图标">
注意：draggable="false" 可禁用默认可拖元素（如禁用图片拖拽）；draggable="auto" 表示由浏览器决定（一般不用）。
捕获拖拽过程：监听核心事件
拖拽涉及两个角色：**被拖元素（drag source）** 和 **目标容器（drop target）**。需分别绑定事件：
立即学习“前端免费学习笔记（深入）”；
-
拖动源端（被拖元素）监听：
dragstart（开始拖时触发，用于设置拖拽数据）drag（拖动中持续触发）dragend（释放后触发，无论是否成功放置） -
投放目标端（接收区域）监听：
dragenter（首次进入目标区域）dragover（悬停在目标上时持续触发 —— 必须阻止默认行为才能允许投放）dragleave（离开目标区域）drop（在目标上松开鼠标，真正执行数据接收）
传递数据：用 DataTransfer 对象存取信息
拖拽的数据不通过 DOM 属性传递，而是写入事件对象的 dataTransfer（只读对象）。常用方法：
-
event.dataTransfer.setData(format, data)：在dragstart中设置数据，format推荐用"text/plain"或自定义类型如"application/json" -
event.dataTransfer.getData(format)：在drop事件中读取对应格式的数据 -
event.dataTransfer.effectAllowed = "move/copy/link"：限定拖拽效果（可选，影响光标样式） -
event.dataTransfer.dropEffect = "move"：在dragover或drop中指定实际生效的效果
示例：拖动一个任务卡片到不同列
<div class="task" draggable="true" data-id="t1">修复登录 Bug</div>
<div class="column" data-status="todo">待办</div>
<div class="column" data-status="done">已完成</div>
<p><script>
document.querySelector('.task').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.dataset.id);
e.dataTransfer.effectAllowed = 'move';
});</p><p>document.querySelectorAll('.column').forEach(col => {
col.addEventListener('dragover', e => {
e.preventDefault(); // 必须！否则 drop 不会触发
e.dataTransfer.dropEffect = 'move';
});</p><pre class="brush:php;toolbar:false;">col.addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const task = document.querySelector(`[data-id="${id}"]`);
const status = col.dataset.status;
task.dataset.status = status;
col.appendChild(task); // 移动 DOM 节点
});});
体验优化与常见陷阱
原生拖拽容易卡在细节上，这些点直接影响可用性：
-
dragover 必须调用
e.preventDefault()，否则浏览器阻止投放（这是最常被忽略的一步） - 给拖动元素加
cursor: move或过渡样式，让用户感知可拖（dragstart中可临时加类） - 在
dragenter/dragleave中添加高亮/边框反馈，提升目标识别度 - 避免在
drag或dragover中做重操作（如频繁 DOM 查询），影响拖动流畅度 - 移动端不支持原生 drag/drop 事件，需配合 touch 事件或使用专门库（如 interact.js）
