DataTransfer对象通过setData()和getData()在dragstart和drop间暂存读取字符串数据，需严格匹配MIME类型、阻止默认行为，且受同源限制；中间事件不可读写，跨域或跨窗口不可靠。
拖拽 API 中的 setData 和 getData 并不是直接在源对象和目标对象之间“传递数据”，而是通过浏览器内置的拖拽数据存储机制（DataTransfer 对象）暂存和读取数据。关键在于：**数据只在拖拽生命周期内有效，且必须在 dragstart 设置、drop 读取，中间步骤（如 dragover）不能设值，也不能跨域或跨窗口可靠传递复杂对象**。
只允许在 dragstart 中调用 setData
setData 只能在 dragstart 事件处理器中合法调用，且仅支持字符串类型（如 'text/plain'、'text/uri-list'、'text/html'，以及自定义 MIME 类型如 'application/json'）。浏览器会忽略其他时机的调用，也不会报错，但数据不会被保存。
- ✅ 正确写法：
<div id="source" draggable="true">拖我</div>
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）通常可兼容，但自定义类型建议严格一致。
在 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），并做好错误处理。
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐做法：
// 拖拽开始时 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 允许脚本访问）。 - ❌ 不可靠场景：
从桌面文件管理器拖入网页（仅支持FilesAPI，getData几乎无效）；
从 Chrome 扩展或外部应用拖拽 —— 数据通常被清空或受限；
跨域 iframe 拖拽 ——getData返回空，需改用message或postMessage配合。
