JavaScript中事件机制中拖拽API怎么用setData和getData在源对象与目标对象间安全传递数据-js教程-PHP中文网

datatransfer对象通过setdata()和getdata()在dragstart和drop间暂存读取字符串数据，需严格匹配mime类型、阻止默认行为，且受同源限制；中间事件不可读写，跨域或跨窗口不可靠。

javascript中事件机制中拖拽api怎么用setdata和getdata在源对象与目标对象间安全传递数据

拖拽 API 中的 setData 和 getData 并不是直接在源对象和目标对象之间“传递数据”，而是通过浏览器内置的拖拽数据存储机制（DataTransfer 对象）暂存和读取数据。关键在于：**数据只在拖拽生命周期内有效，且必须在 dragstart 设置、drop 读取，中间步骤（如 dragover）不能设值，也不能跨域或跨窗口可靠传递复杂对象**。

只允许在 dragstart 中调用 setData

setData 只能在 dragstart 事件处理器中合法调用，且仅支持字符串类型（如 'text/plain'、'text/uri-list'、'text/html'，以及自定义 MIME 类型如 'application/json'）。浏览器会忽略其他时机的调用，也不会报错，但数据不会被保存。

✅ 正确写法：

拖我

source.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', 'hello');
  e.dataTransfer.setData('application/json', JSON.stringify({id: 123, type: 'item'}));
});

❌ 错误写法：
在 drag、dragover 或 drop 中调用 setData —— 数据会被丢弃，getData 返回空字符串。

drop 时用 getData 读取，注意 MIME 类型匹配

getData 必须在 drop（或 dragend）事件中调用，且传入的 MIME 类型必须与 setData 时完全一致（包括大小写），否则返回空字符串。不区分大小写的 MIME 类型（如 text/plain）通常可兼容，但自定义类型建议严格一致。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 安全读取示例：

target.addEventListener('drop', e => {
  e.preventDefault(); // 必须阻止默认行为，否则无法触发 drop
  const plain = e.dataTransfer.getData('text/plain'); // → 'hello'
  const jsonStr = e.dataTransfer.getData('application/json'); // → '{"id":123,"type":"item"}'
  const data = JSON.parse(jsonStr);
  console.log(data); // {id: 123, type: 'item'}
});

⚠️ 常见陷阱：
• 忘记 e.preventDefault() → drop 事件不触发，getData 无机会执行；
• MIME 类型拼写错误（如 'application/json' 写成 'application/jso'）→ 返回空字符串；
• 尝试读取未设置的类型（如只设了 text/plain 却读 application/json）→ 返回空字符串。

不支持直接传对象，需序列化与反序列化

DataTransfer 只接受字符串，任何非字符串值（包括对象、数组、函数）都会被隐式转为 [object Object]，失去原始结构。因此必须手动序列化（如 JSON.stringify）和反序列化（JSON.parse），并做好错误处理。

✅ 推荐做法：

// 拖拽开始时
e.dataTransfer.setData('application/x-dnd-item', JSON.stringify({
  id: item.id,
  type: 'product',
  name: item.name
}));

// 放下时
try {
  const payload = JSON.parse(e.dataTransfer.getData('application/x-dnd-item'));
  if (payload && typeof payload === 'object') {
    handleDrop(payload);
  }
} catch (err) {
  console.warn('无效拖拽数据', err);
}

? 提示：
使用带命名空间的自定义类型（如 'application/x-dnd-item'）可避免与其他应用冲突；
不要用 'text/plain' 存结构化数据 —— 容易被其他程序覆盖或误解。

安全边界：同源限制与数据隔离

浏览器对拖拽数据实施同源策略：从网页 A 拖出的数据，在网页 B 中只能被同源页面的 drop 事件读取。跨域拖拽（如从外站拖到你的页面）时，getData 大部分类型返回空字符串，仅 text/plain 和 text/uri-list 可能保留（取决于浏览器策略和用户设置），不可依赖。

✅ 可靠场景：
同一页面内元素互拖、同源 iframe 间拖拽（需确保 iframe 允许脚本访问）。
❌ 不可靠场景：
从桌面文件管理器拖入网页（仅支持 Files API，getData 几乎无效）；
从 Chrome 扩展或外部应用拖拽 —— 数据通常被清空或受限；
跨域 iframe 拖拽 —— getData 返回空，需改用 message 或 postMessage 配合。