dragstart 必须调用 datatransfer.setdata() 设置 mime 类型和字符串数据，drop 需 dragover 配合 preventdefault() 才触发，e.target 是实际击中节点而非绑定容器，跨 iframe 拖放 datatransfer 不共享。

dragstart 事件必须设置 dataTransfer.setData()，否则 drop 拿不到数据

很多初学者只加了 draggable="true" 和 dragstart 监听器，却忘了调用 e.dataTransfer.setData()。结果 drop 里 e.dataTransfer.getData() 返回空字符串，还以为是事件没触发。

关键点：

• setData() 的第一个参数是 MIME 类型，不是随便写的字符串；常用 "text/plain"、"text/uri-list"、"application/json"（需自行序列化）
• 第二个参数必须是字符串；传对象会自动转成 [object Object]，建议先 JSON.stringify()
• 不调用 setData() 时，getData() 总是返回空，且 e.dataTransfer.types 为空数组

drop 事件里不调用 preventDefault()，drop 就永远不会触发

drop 看似是“终点”，但它依赖前置的 dragover 事件配合 preventDefault() 才能激活。很多人只绑了 drop，漏掉 dragover 或忘了阻止默认行为，导致鼠标松开后什么也不发生。

典型错误现象：

• 拖着元素划过目标区，光标始终是“禁止”符号（圆圈斜杠）
• drop 回调完全不执行，控制台也无报错
• 即使写了 dragenter，也不顶用——dragover 才是决定“能否投放”的开关

dragstart 和 drop 的 event.target 不一定是你预期的 DOM 节点

dragstart 的 e.target 是被拖元素本身，但 drop 的 e.target 是鼠标松开时**实际击中的节点**，可能是个子元素（比如 <span></span> 或 <img>），而不是你绑定事件的容器。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

常见陷阱：

• 给 #dropzone 绑了 drop，但用户松手在里面的 <p></p> 上，e.target 就是那个 <p></p>
• 直接操作 e.target.innerHTML 可能破坏结构；应统一用 e.currentTarget（即绑定事件的元素）
• 需要获取拖入位置坐标？别依赖 e.target.getBoundingClientRect()，改用 e.clientX / e.clientY + 容器偏移

跨 iframe 拖放时，dragstart 在源页面，drop 在目标页面，dataTransfer 不共享

原生 Drag & Drop API 支持跨 iframe 拖放（只要同源），但 dataTransfer 对象不会穿透 iframe 边界——dragstart 中设的数据，在另一个 iframe 的 drop 里读不到。

可行方案只有两种：

• 只传简单标识符（如 ID 字符串），然后在 drop 侧通过 window.parent 或 postMessage 主动查数据
• 放弃 dataTransfer，改用全局状态管理（例如 sessionStorage 写入再读取）
• 注意：跨域 iframe 完全不支持原生拖放通信，连 dragover 都不会触发

拖放流程看似线性，但每个环节都卡在细节上：dataTransfer 是哑管道、preventDefault 是隐形开关、target 是动态靶心、iframe 是天然隔离墙。写完 dragstart 和 drop 只是开始，真正要跑通，得把这四个点全对齐。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！