HTML5拖拽数据传输核心是DataTransfer对象，仅在dragstart、drop等事件中通过event.dataTransfer访问；关键属性包括dropEffect、effectAllowed、types、files、items；核心方法有setData()、getData()、clearData()、setDragImage()；需注意同源限制、事件默认阻止及文件处理规范。
HTML5 拖拽数据传输的核心是 DataTransfer 对象，它在拖拽源和放置目标之间架起数据桥梁。这个对象不能手动创建，只在 dragstart、drop 等拖拽事件的 event 参数中自动提供，即通过 event.dataTransfer 访问。
关键属性
dropEffect：控制拖拽时鼠标的视觉反馈（如“+”号、“→”箭头、“禁止”符号）。可设为 "none"、"copy"、"move"、"link"，需配合 effectAllowed 使用才生效。
effectAllowed：声明当前拖拽元素允许执行的操作类型，默认值 "uninitialized"（等效于 "all"）。常用于限制行为，比如设为 "move" 后，用户松手时浏览器只允许移动，不会触发复制。
types：返回一个 DOMStringList，列出所有已通过 setData() 存入的数据格式，例如 ["text/plain", "text/html"]；若拖入了文件，还会包含 "Files"。
立即学习“前端免费学习笔记（深入）”；
files：当从操作系统拖入文件时，该属性返回 FileList 对象，可直接读取文件名、大小、类型，用于后续上传或预览。
items：返回 DataTransferItemList 对象，是更现代的数据集合接口，支持增删项（add() / remove()），适合处理多类型混合数据（如文字+图片+文件）。
核心方法
setData(format, data)：仅在 dragstart 事件中有效，用于写入数据。
- format 推荐使用标准 MIME 类型，如 "text/plain"、"text/html"、"application/json"；
- 同一 format 多次调用会覆盖前值；
- 不支持自定义格式名（如 "mydata"），否则 getData() 可能返回空字符串。
getData(format)：仅在 drop（及 dragend）事件中可用，用于读取数据。
- 必须与 setData() 中的 format 完全一致；
- 在 dragover 中调用始终返回空字符串——这是浏览器的安全限制，防止中途窃取数据。
clearData([format])：用于清理缓存数据。
- 不传参数则清空全部格式数据；
- 建议在 dragend 中调用，避免残留影响后续拖拽。
setDragImage(element, x, y)：自定义拖拽时显示的图像。
- element 可以是 <img>、<canvas> 或任意 DOM 元素；
- x、y 是鼠标相对于该元素左上角的偏移量，通常设为半宽高实现居中跟随效果。
使用注意事项
– setData() 和 getData() 必须成对出现在 dragstart 和 drop 中，中间事件（如 dragover）无法读取数据；
– 所有拖拽事件默认被浏览器阻止放置行为，drop 和 dragover 中必须显式调用 event.preventDefault()；
– 若拖拽目标是 iframe 或跨域页面，getData() 将失效，属于同源策略限制；
– 处理文件拖入时，优先用 event.dataTransfer.files，而非尝试用 getData("Files")（不支持）。
