JavaScript原生拖放需三事件协同：dragstart设dataTransfer、dragover必须preventDefault、drop获取数据；dataTransfer仅支持字符串，需序列化对象；元素须设draggable="true"；移动端不支持需touch模拟。
JavaScript 实现拖放功能不难，但默认行为干扰多、浏览器兼容细节多，直接用原生 drag / drop 事件链必须手动阻止默认行为，否则 drop 事件根本不会触发。
dragstart、dragover、drop 这三个事件缺一不可
拖放不是“按住拖动就完事”，它是一套协作事件：只有在 dragstart 中设置 dataTransfer，并在 dragover 中调用 event.preventDefault()，drop 才会被浏览器允许触发。
-
dragstart：用户开始拖拽元素时触发，必须在这里调用event.dataTransfer.setData()，否则目标区域无法读取拖拽内容 -
dragover：拖拽过程中持续触发（每几十毫秒一次），必须显式写event.preventDefault()，否则浏览器会阻止drop -
drop：松手释放时触发，此时才能获取event.dataTransfer.getData()并执行实际逻辑
dataTransfer 对象是唯一数据通道，但只支持字符串
dataTransfer 不是任意对象容器，它只接受字符串类型的数据。想传对象或 DOM 节点？得自己序列化。
- 只能用
setData('text/plain', 'xxx')或setData('text/html', '<div>...</div>')，不支持setData('application/json', obj) - 常用技巧：用
JSON.stringify()存，JSON.parse()取；或用自定义 MIME 类型如'application/x-dnd-id'存 ID 字符串 - 注意：Firefox 对
dataTransfer.items支持更严格，Chrome 允许空setData，但 Firefox 会静默失败
可拖拽需显式设置 draggable="true"，且仅限某些元素
不是所有 HTML 元素默认可拖拽。<div>、<code><p></p> 等普通元素必须加 draggable="true" 属性，否则连 dragstart 都不会触发。
立即学习“Java免费学习笔记（深入）”；
- 原生可拖拽元素：图片（
<img alt="javascript如何实现拖放功能_它有哪些事件监听？" >）、链接（<a href></a>）、选中文本 —— 它们无需设置draggable就能触发拖拽，但会带出浏览器默认行为（比如拖图到地址栏会导航） - 自定义拖拽必须加
draggable="true"，同时建议加 CSSuser-select: none防止文字选中干扰 - 移动端不支持原生 drag/drop 事件，需用
touchstart/touchmove模拟，这是常被忽略的兼容断层
const box = document.getElementById('draggable-box');
box.draggable = true; // 或 HTML 中写 draggable="true"
box.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'box-123');
e.dataTransfer.effectAllowed = 'move'; // 可选：限制光标样式
});
const dropZone = document.getElementById('drop-area');
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // ⚠️ 必须！否则 drop 不会触发
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
console.log('dropped:', id);
});
真正容易出问题的地方不在逻辑，而在两个地方：一是忘了在 dragover 里写 preventDefault，二是以为 dataTransfer 能传任意值 —— 它只认字符串，且不同浏览器对空数据或非法 MIME 类型的容忍度差异很大。
