HTML5拖放必须四步全做：设draggable="true"、dragstart中调setData()、dragover中preventDefault()、drop中用匹配类型调getData()，缺一不可。
拖拽元素前必须设置 draggable="true"
HTML5 拖放 API 不会自动启用任何元素的拖拽能力。哪怕是个 常见错误：写了 在 常用写法： 立即学习“前端免费学习笔记（深入）”； 说明： 很多新手卡在「能拖但放不进去」——根本原因是没处理 注意点： 在 典型操作链： 易错提醒： 真正麻烦的不是 API 多难记，而是每个环节都有一个“非做不可”的小动作：设 draggable="true"。注意：只对 元素默认为 true，其他所有标签（包括 、）都默认是 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'）在跨浏览器时可能失效drop 事件里的 getData() 就拿不到东西目标区域要阻止
dragover 默认行为才能触发 drop
dragover。浏览器默认会阻止元素成为有效放置目标，所以必须监听并 preventDefault()：dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！没有这行，drop 事件永远不会触发
});
dragover 就够了，dragenter 不需要（除非你要高亮提示） 这类原生控件，它自己已处理，不用额外干预
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') 存的值 → 拿不到draggable、调 setData、阻 dragover、配对 getData 类型。漏一个，整个链就断了。
