拖放功能需满足三要素：设draggable="true"、dragstart中调用datatransfer.setdata()并preventdefault()、dragover中必须preventdefault()；否则drop事件不触发。
dragstart 事件必须设置 dataTransfer 并阻止默认行为
浏览器默认只允许图片、链接和选中文本拖动，其他元素（如 <div>）要拖动，必须在 <code>dragstart 中调用 event.dataTransfer.setData()，否则拖拽会静默失败。同时，不调用 event.preventDefault() 会导致部分浏览器（如 Firefox）拒绝触发后续拖放事件。
-
dataTransfer.setData('text/plain', 'some-id')是最常用方式，类型字符串不能随意写，推荐用'text/plain'或'text/html' - 必须给被拖元素设置
draggable="true"属性，否则dragstart根本不会触发 - 不要在
dragstart里修改 DOM（比如加 class），视觉反馈应通过:drag伪类或dragover动态控制
dragover 和 drop 事件缺一不可，且 dragover 必须阻止默认行为
drop 事件不会触发，除非 dragover 事件中调用了 event.preventDefault() —— 这是拖放 API 最常踩的坑。浏览器把 dragover 当作“是否允许投放”的信号，不阻止默认，就等于告诉浏览器“这里不能放”，于是 drop 直接被忽略。
-
dragover里只需event.preventDefault()，无需其他逻辑；想加视觉反馈可同步设置event.currentTarget.classList.add('drag-over') -
drop里记得再次调用event.preventDefault()（虽然部分浏览器不强制，但保持一致更稳妥） - 从
dataTransfer取数据要用getData('text/plain')，类型必须和setData时完全一致，大小写敏感
需要监听的完整事件链：dragstart → drag → dragend → dragenter → dragover → dragleave → drop
实际项目中并非所有事件都要处理，但理解它们的触发时机能快速定位问题。例如：dragenter 和 dragleave 适合做区域高亮开关；drag 可用于实时更新拖动位置（但性能敏感，慎用）；dragend 是清理状态（如移除临时 class）的唯一可靠时机。
-
dragenter在拖动元素首次进入目标区域时触发（注意：子元素也会冒泡触发，需用event.target === event.currentTarget判断是否进入目标本身） -
dragleave在拖动离开目标区域时触发，但鼠标经过子元素也会误触发，建议配合计数器或relatedTarget过滤 -
drag每次鼠标移动都触发，频率高，避免在里面做 DOM 操作或复杂计算
document.querySelector('#draggable').addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});
document.querySelector('#dropzone').addEventListener('dragover', (e) => {
e.preventDefault(); // 关键
});
document.querySelector('#dropzone').addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
e.target.appendChild(document.getElementById(id));
});
拖放逻辑看似简单，但 dataTransfer 的类型匹配、dragover 的 preventDefault、以及事件冒泡导致的 dragenter/dragleave 误判，这三处最容易漏掉或写错。
