dragstart 事件必须调用 setData() 才能触发后续拖放，dragover 必须 preventDefault() 否则 drop 不会触发，drop 中需手动处理 DOM 更新并 clearData()。
dragstart 事件必须设置 dataTransfer 才能触发后续拖放
很多开发者以为只要给元素加了 draggable="true" 就能拖，结果 dragend 都没触发——根本原因是没在 dragstart 里调用 event.dataTransfer.setData()。浏览器默认会忽略没有有效拖放数据的拖拽行为。
-
dataTransfer.setData('text/plain', 'some-id')是最常用写法，类型字符串不能随意写，必须是标准 MIME 类型或自定义前缀如'application/myapp-item' - 不设
setData，drop事件里的event.dataTransfer.getData()一定返回空字符串，且dragover可能被浏览器静默阻止 - 如果只拖视觉效果（比如排序 UI），也得设一个占位值，例如
event.dataTransfer.setData('text', '')
dragover 默认被阻止，必须显式调用 preventDefault()
dragover 是唯一一个浏览器默认取消的拖放事件。不加 event.preventDefault()，就永远进不了 drop。
- 只在需要接受拖入的目标元素上监听
dragover，并在回调中立刻执行event.preventDefault() - 别在 document 或 body 上无差别监听并 preventDefault —— 这会导致页面滚动失效、文本选中异常等副作用
- 可以配合
event.dataTransfer.types做简单校验，比如只对includes('text/plain')的才允许 drop
drop 事件里记得清除 dataTransfer 并处理业务逻辑
drop 不是“自动完成移动”，它只是通知“东西被扔过来了”，所有 DOM 更新、状态同步都得手动做。
- 务必在
drop回调开头加event.preventDefault()（虽然dragover已拦过，但规范要求这里也得防） - 用
event.dataTransfer.getData('text/plain')拿到dragstart里存的值，再根据这个 ID 查找/移动对应 DOM 节点 - 拖放结束后建议清空数据：
event.dataTransfer.clearData()，避免多次 drop 误读旧数据 - 注意：如果目标是文件拖入，要用
event.dataTransfer.files，不是getData
document.getElementById('draggable').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.dataset.id);
});
document.getElementById('droptarget').addEventListener('dragover', e => {
e.preventDefault(); // 关键
});
document.getElementById('droptarget').addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const item = document.querySelector(`[data-id="${id}"]`);
if (item) e.target.appendChild(item);
e.dataTransfer.clearData();
});
拖放逻辑本身不难，真正容易卡住的是那些“没报错但就是不工作”的隐性规则：比如 dragstart 必须设数据、dragover 必须 preventDefault、drop 必须再 preventDefault —— 少一个，整个链条就断在浏览器底层。 
