datatransfer.getdata()取不到值的主因是dragstart未调用setdata()或类型不匹配，且必须在preventdefault()后的drop/dragover中读取，类型名须完全一致，大小写敏感。
dataTransfer.getData() 取不到值的常见原因
绝大多数时候不是 API 用错了，而是 dragstart 里没调用 setData()，或者类型名不匹配。浏览器对 dataTransfer 的数据读取有严格限制：只有在 drop 或 dragover 事件中（且事件被 preventDefault() 阻止默认行为），才能在 getData() 中读出之前存入的数据。
-
setData('text/plain', 'hello')存入后，必须用getData('text/plain')读取，不能写成getData('text')或getData('plain') - 若存的是自定义类型如
setData('application/json', '{"id":1}')，读取时类型字符串必须完全一致，大小写敏感 - Chrome 和 Firefox 允许在
drop事件中直接读取，但 Safari 要求先在dragover中调用preventDefault()，否则getData()返回空字符串
拖拽过程中如何安全传递结构化数据
直接传 JSON 字符串是常用做法，但要注意编码和解析边界。不要把对象直接传给 setData() —— 它只接受字符串，传对象会自动调用 toString()，结果通常是 [object Object]。
event.dataTransfer.setData('application/json', JSON.stringify({ id: 42, name: 'foo' }));
在 drop 处理函数中：
const jsonStr = event.dataTransfer.getData('application/json');
let data;
try {
data = JSON.parse(jsonStr);
} catch (e) {
console.error('invalid JSON in drag data', jsonStr);
}
- 避免使用
text/html类型传任意 HTML 片段，容易触发 XSS（尤其当内容来自用户输入） - 如果需传二进制或大文件，应改用
dataTransfer.items+getAsFile()，而非setData() - IE11 不支持
application/json类型，兼容场景建议降级为text/plain并自行约定格式
为什么 drop 事件里 getData() 返回空字符串
这是最常被忽略的流程断点：浏览器默认会阻止 drop 事件的“可投放”状态，导致 dataTransfer 数据被清空或锁定。关键不是有没有绑定 drop，而是 dragover 是否明确允许投放。
立即学习“前端免费学习笔记（深入）”；
- 必须给目标元素绑定
dragover事件，并在其中调用event.preventDefault() - 仅靠
drop事件里的preventDefault()不够，此时已经太晚 - 如果目标是
<div contenteditable> 或表单控件，它们自带默认拖放行为，需额外 <code>event.stopPropagation()防止干扰target.addEventListener('dragover', e => { e.preventDefault(); // 必须！否则 drop 时 dataTransfer 为空 }); target.addEventListener('drop', e => { e.preventDefault(); const value = e.dataTransfer.getData('text/plain'); console.log(value); // 这里才能拿到值 });dataTransfer 与跨源/跨窗口拖拽的限制
浏览器出于安全考虑，禁止从其他源（如 iframe、新窗口、外部应用）拖入数据时读取原始内容 —— 即使你看到光标变成“+”号，
getData()仍返回空字符串。这不是 bug，是规范强制行为。- 同源 iframe 内拖出的数据，在父页面
drop中可以正常读取 - 从桌面文件管理器拖入文件，只能通过
dataTransfer.files或dataTransfer.items获取File对象，无法用getData()读取路径或原始内容 - 拖拽文本到浏览器外（如记事本），属于 OS 级操作，网页端无法监听或干预
真正需要跨源通信时，别依赖拖拽数据传递敏感信息，改用
postMessage()或服务端中转更可靠。 - 同源 iframe 内拖出的数据，在父页面
