dragstart中必须调用dataTransfer.setData()，否则拖拽失败；drop区需在dragover中preventDefault()才能触发drop；跨iframe需序列化数据；移动端不支持原生拖放，须降级处理。
dragstart 事件里必须设置 dataTransfer 否则拖拽会失败
浏览器默认只允许图片、链接、选中文本被拖拽。想拖拽任意元素（比如 div），必须在 dragstart 中调用 event.dataTransfer.setData()，哪怕只是设个空字符串。不设就会静默失败——鼠标看起来能抓起元素，但松手后没反应，控制台也无报错。
常见错误写法：
element.addEventListener('dragstart', () => {
// ❌ 漏掉这行，拖拽无效
});
正确写法：
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', ''); // 或 'text/html', 'application/json' 等
// 可选：设置拖拽时的视觉反馈
e.dataTransfer.setDragImage(new Image(), 0, 0); // 隐藏默认拖影
});
-
setData()第一个参数是 MIME 类型，不是随便写的字符串；'text/plain'最通用 - 即使不需要传输真实数据，也必须调用一次
setData，这是 HTML5 拖放的硬性要求 -
setDragImage()若传入无效图片或坐标越界，会回退到默认拖影，不影响功能
drop 区域必须阻止 dragover 默认行为才能触发 drop
drop 事件不会自动触发——浏览器默认禁止任何区域接收拖放，除非显式告诉它“这里可以放”。而关键一步是：在 dragover 事件中调用 event.preventDefault()。
只监听 drop 是不够的，也不用管 dragenter 或 dragleave（除非要做高亮）：
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // ✅ 必须有，否则 drop 永远不会触发
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
// 处理放置逻辑
});
- 漏掉
dragover.preventDefault()是最常导致“拖到目标上没反应”的原因 -
drop事件里也建议调用preventDefault()，避免某些浏览器执行默认行为（如打开文件） - 如果目标区是
contenteditable或input，可能还需额外处理焦点问题
跨 iframe 拖拽需注意 dataTransfer 数据隔离
iframe 内外属于不同浏览上下文，dataTransfer 中的数据无法直接共享对象引用，只能传序列化内容。例如在父页面拖拽、子 iframe 中放置，getData('text/plain') 能拿到字符串，但不能拿到原始 DOM 节点或函数。
立即学习“前端免费学习笔记（深入）”；
- 若需传递结构化数据，用
JSON.stringify()+setData('application/json', ...) - 不要尝试
setData('text/html', element.outerHTML)来还原 DOM——解析风险高，且丢失事件绑定和状态 - 跨 iframe 时，
dragstart和drop的事件对象不互通，所有通信必须走字符串/JSON
移动端不支持原生 HTML5 拖放 API
iOS Safari 和 Android Chrome 均未实现 dragstart/drop 等事件的完整支持。部分版本可能触发事件但行为不可靠（如无法拖出 viewport、dataTransfer 为空）。这不是 bug，是规范未强制要求移动端实现。
真实项目中遇到移动端需求，必须降级：
// 检测是否为触屏设备
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouch) {
// 改用 mousedown/touchstart + mousemove/touchmove + mouseup/touchend 模拟
// 或引入第三方库如 interact.js / sortablejs
}
- 别依赖
draggable="true"在手机上生效——它只影响桌面端 - 即使加了
touch-action: none，也无法激活原生拖放事件链 - PC 端调试没问题，不代表移动端可用；真机测试不可跳过
setData 是开关，dragover.preventDefault() 是通行证，跨上下文要序列化，移动端得重写。漏掉其中任一环，交互就卡在“看起来能动，实际没反应”这个状态。 
