dragstart事件中必须调用setData()，否则drop事件不会触发；需在dragover中preventDefault()才能启用投放；跨iframe拖拽时dataTransfer数据为空，应改用postMessage通信。
dragstart 事件里必须调用 setData() 否则拖放会失败
浏览器默认只允许文本、链接、图片等少数类型被拖拽，自定义元素（比如 <div draggable="true">）触发 dragstart 后，如果不显式设置拖拽数据，整个拖放流程会在鼠标松开时静默终止——看起来“能拖但放不进去”，实际是 drop 事件根本不会触发。
关键动作只有一步：event.dataTransfer.setData(type, data)。常用 type 是 "text/plain" 或 "text/html"，也可以用自定义类型如 "application/json"，但接收端必须用相同类型读取。
实操建议：
-
setData()必须在dragstart事件处理函数中调用，且不能延迟（比如放在setTimeout里） - 如果想传结构化数据（如 ID 或对象），先
JSON.stringify()再传，避免直接传对象导致报错 - 不要依赖
setData("text/plain", ...)的值做业务逻辑判断——有些浏览器对非文本类型限制严格，getData()可能返回空字符串
draggable="true" 元素必须有非空 data- 属性或明确的视觉反馈
很多开发者给一个空 <div draggable="true"></div> 绑了 dragstart，结果发现拖不动。不是代码问题，是浏览器出于可访问性考虑，对“不可见、无内容、无语义”的元素禁用拖拽。
立即学习“前端免费学习笔记（深入）”；
解决方法很简单：让元素具备可交互感知。常见做法：
- 加
data-id="123"这类属性（哪怕只是占位） - 确保有可见内容，哪怕只是
<div draggable="true"> </div>（带空格） - 在
dragstart中设置event.dataTransfer.effectAllowed = "move"或"copy"，配合 CSS::-webkit-drag伪类提供视觉反馈
drop 事件不触发？大概率是 dragover 事件没阻止默认行为
drop 事件能否触发，完全取决于目标区域是否允许投放。而浏览器默认禁止所有元素接受投放——你必须在目标元素上监听 dragover，并在其中调用 event.preventDefault()。
这个步骤常被遗漏，现象就是：拖着元素到目标区，光标变成“禁止”图标（圆圈斜杠），松手后什么也不发生。
正确写法示例：
target.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！否则 drop 永远不会触发
e.dataTransfer.dropEffect = 'move'; // 可选，影响光标样式
});
注意：preventDefault() 必须在 dragover 中同步执行；异步、条件判断后才调用，或者绑定在父元素却忘了冒泡控制，都会导致失效。
跨 iframe 拖拽时 dataTransfer 数据为空？别用 setData() 传敏感信息
同源 iframe 内拖拽基本正常；但跨域 iframe 中，出于安全限制，dataTransfer.getData() 在 drop 阶段始终返回空字符串，即使 setData() 成功执行了。
这不是 bug，是规范行为。此时唯一可靠的方式是：用 postMessage 在拖拽开始前就完成上下文通信，把 ID 或标识符传过去，drop 时只做轻量触发，再通过消息通道查数据。
容易忽略的一点：dragstart 和 drop 的事件对象生命周期独立，dataTransfer 不是全局状态，也不是引用传递——它只在本次拖拽会话中有效，且无法被 JS 直接序列化或调试输出。
