拖拽功能不生效需检查draggable属性和事件监听顺序：必须设draggable="true"、在dragstart中用datatransfer.setdata()存字符串数据、目标容器监听dragover并调用preventdefault()。
拖拽功能不生效？先检查 draggable 属性和事件监听顺序
HTML5 原生拖拽不是“设了 draggable="true" 就能拖”，它依赖完整的事件链。常见现象是元素看起来可拖，但松手就回弹、目标区没反应——大概率是漏了 dragstart 或没阻止 dragover 默认行为。
必须做的三件事：
-
draggable="true"要加在被拖元素上（img、div等默认不可拖） - 在
dragstart里用event.dataTransfer.setData()存数据，否则目标区拿不到内容 - 目标容器必须监听
dragover并调用event.preventDefault()，否则浏览器会拒绝投放
示例：拖一个 div 到另一个 div
<div draggable="true" id="item">拖我</div>
<div id="dropzone">投到这里</div>
<script>
document.getElementById('item').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'hello');
});
document.getElementById('dropzone').addEventListener('dragover', e => {
e.preventDefault(); // 关键！不写这句，drop 事件永远不会触发
});
document.getElementById('dropzone').addEventListener('drop', e => {
e.preventDefault();
console.log(e.dataTransfer.getData('text/plain')); // 输出 hello
});
</script>
dataTransfer 只能传字符串？别硬塞对象
dataTransfer.setData() 的第一个参数是 MIME 类型，第二个才是值；它只接受字符串，传对象会自动转成 [object Object]，取出来没法用。
立即学习“前端免费学习笔记（深入）”；
常见错误是想直接传 DOM 元素或 JSON 对象：
- ❌
e.dataTransfer.setData('application/json', {id: 1})→ 实际存的是[object Object] - ✅ 正确做法：序列化后再传，比如
e.dataTransfer.setData('text/plain', JSON.stringify({id: 1})) - ✅ 更稳妥：用自定义类型 +
JSON.parse()解析，避免和其它应用冲突（如系统剪贴板）
注意：text/plain 最兼容，但若需区分数据来源，建议用类似 application/x-myapp-item 这种自定义类型，避免误匹配。
拖拽跨 iframe 或跨窗口？原生不支持，得换方案
HTML5 拖拽 API 天然不支持跨 iframe（即使同源）、也不支持跨浏览器窗口。一旦鼠标拖出当前窗口边界，dragend 会立刻触发，drop 根本不会发生。
如果你的场景涉及：
- 左右分栏布局，右边是
iframe内容 - 桌面级 Web 应用需要拖到外部窗口（如 Electron 主窗口）
- 想拖文件进网页但又依赖复杂 UI 层
那就别硬扛原生 API。改用 mousedown/mousemove/mouseup 手动模拟拖拽，配合 pointer-events: none 和绝对定位占位，可控性反而更高。原生拖拽省事，但边界太死。
移动端没有 drag 事件？别指望它工作
几乎所有 iOS Safari 和部分安卓 WebView 完全禁用原生拖拽事件（dragstart 不触发、drop 无响应），这是浏览器策略，不是你代码写错了。
真实情况：
- Chrome on Android：部分支持，但需用户长按后才激活，体验割裂
- iOS Safari：
draggable="true"被忽略，drag*事件全不触发 - 解决路径只有一条：检测
'ontouchstart' in window，移动端切到touchstart/touchmove/touchend模拟逻辑
别试图用 event.preventDefault() 在 touch 事件里“启用” drag —— 它就是没实现，补丁打不上。
拖拽交互在移动端本质是手势问题，不是 HTML5 功能缺失的问题。这点最容易被忽略，直到上线后用户说“怎么拖不动”。
