dragstart事件仅在draggable="true"元素上触发；drop需在dragover和drop中均调用preventDefault()才生效；setData的type必须为标准MIME类型；跨iframe拖放受同源及sandbox限制，建议改用postMessage。
dragstart 事件必须在 draggable="true" 元素上触发
浏览器只对显式声明 draggable="true" 的元素启用拖放 API，即使 CSS 设置了 cursor: move 或 JS 绑定了 mousedown，也不会触发后续拖放事件。常见错误是直接给 div 或 img 加监听却没设属性：
-
<div>试试拖我</div>→ 不会触发dragstart -
<div draggable="true">试试拖我</div>→ 正确起点
注意：<img> 和 <a> 默认 draggable="true"，但其他元素（如 <span>、<button>）必须手动加。
drop 事件需要阻止默认行为才能生效
drop 事件本身不会自动“接收”拖入内容，浏览器默认会忽略它——除非你在 dragover 和 drop 中都调用 event.preventDefault()。漏掉任一个，drop 就不会触发或数据为空：
- 只在
drop里preventDefault()→drop能触发，但event.dataTransfer.files或.getData()可能为null - 只在
dragover里preventDefault()→ 拖拽时鼠标显示“禁止”图标，无法释放 - 两个都加 → 正常接收
典型写法：
立即学习“前端免费学习笔记（深入）”；
target.addEventListener('dragover', e => e.preventDefault());
target.addEventListener('drop', e => {
e.preventDefault();
const files = e.dataTransfer.files; // 文件列表
const text = e.dataTransfer.getData('text/plain'); // 文本
});
dataTransfer.setData() 的类型字符串不能随意写
在 dragstart 中设置拖拽数据时，setData(type, data) 的 type 参数不是自定义标签，而是有明确语义的 MIME 类型。浏览器靠它匹配 getData(type)，写错就拿不到值：
-
e.dataTransfer.setData('text', 'hello')→ 错误，'text'不是标准类型 -
e.dataTransfer.setData('text/plain', 'hello')→ 正确，可被getData('text/plain')读取 -
e.dataTransfer.setData('application/json', JSON.stringify(obj))→ 合法，但目标需用相同字符串读取 - 文件拖放不用
setData，直接用e.dataTransfer.files获取
常见可用类型：text/plain、text/html、application/json、Files（只读，由系统填充）。
跨 iframe 拖放需注意同源与事件委托限制
如果拖拽源和投放目标在不同 <iframe> 中，即使同域，事件也不会自动穿透。此时不能依赖父页面统一监听，必须在目标 iframe 内部绑定 dragover 和 drop。更麻烦的是：若 iframe 是 sandbox 属性启用状态（如 sandbox="allow-scripts"），默认禁用拖放，需显式加 allow-drop（Chrome 支持，Firefox 不支持）：
-
<iframe sandbox="allow-scripts allow-drop">→ Chrome 下可行 -
<iframe sandbox="allow-scripts">→ 拖放事件完全不触发 - 无 sandbox 但跨域 iframe → 安全限制导致
dataTransfer对象为空，无法读取任何数据
实际项目中，跨 iframe 场景建议改用 postMessage 配合按钮点击触发数据传递，比硬啃拖放兼容性更可控。
