HTML5拖放必须四步全做：设draggable="true"、dragstart中调setData()、dragover中preventDefault()、drop中用匹配类型调getData()，缺一不可。
拖拽元素前必须设置 draggable="true"
HTML5 拖放 API 不会自动启用任何元素的拖拽能力。哪怕是个 <div>，默认也拖不动。必须显式加属性：draggable="true"。注意：只对 <img> 和 <a> 元素默认为 true，其他所有标签（包括 <div>、<span>、<li>）都默认是 false。
常见错误：写了 ondragstart 但没加 draggable="true"，结果完全没反应。别跳过这一步。
dragstart 里必须调用 setData() 否则拖拽中断
在 dragstart 事件中，不调用 event.dataTransfer.setData()，Chrome/Firefox 会直接取消拖拽流程（松手即结束，目标区域收不到 drop）。这是最容易被忽略的硬性要求。
常用写法：
立即学习“前端免费学习笔记（深入）”；
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id); // 必须有这一行
});
说明：
-
'text/plain'是最兼容的类型，'text/html'或自定义类型（如'application/json'）在跨浏览器时可能失效 - 值可以是任意字符串，比如 ID、JSON 字符串，但不能是对象或函数
- 不设类型或设错类型，
drop事件里的getData()就拿不到东西
目标区域要阻止 dragover 默认行为才能触发 drop
很多新手卡在「能拖但放不进去」——根本原因是没处理 dragover。浏览器默认会阻止元素成为有效放置目标，所以必须监听并 preventDefault()：
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！没有这行，drop 事件永远不会触发
});
注意点：
- 只阻止
dragover就够了，dragenter不需要（除非你要高亮提示） - 如果目标是
<input type="file">这类原生控件，它自己已处理，不用额外干预 - 若目标区域是空
<div>，记得给它设个最小高度/边框，否则视觉上“看不见”可拖区域
drop 里取数据要用 getData()，且类型必须匹配 setData()
在 drop 事件中，靠 e.dataTransfer.getData('text/plain') 拿到拖拽时存的数据。类型字符串必须和 setData() 时一致，否则返回空字符串。
典型操作链：
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain'); // 类型要严格一致
const draggedEl = document.getElementById(id);
if (draggedEl) {
dropZone.appendChild(draggedEl); // 移动元素
}
});
易错提醒：
- 忘了
e.preventDefault()→ 页面会跳转（如果是拖链接）或打开文件（如果是拖文件） - 类型写成
'Text/Plain'（大小写敏感）→ 返回空 - 试图用
getData('text/html')取setData('text/plain')存的值 → 拿不到
真正麻烦的不是 API 多难记，而是每个环节都有一个“非做不可”的小动作：设 draggable、调 setData、阻 dragover、配对 getData 类型。漏一个，整个链就断了。
