html5拖拽数据传输必须通过event.datatransfer对象完成，仅dragstart中可调用setdata()写入标准mime类型数据，drop事件中需preventdefault()后用完全匹配格式调用getdata()读取；effectallowed和dropeffect需配合设置操作权限；文件拖入时应直接使用files属性而非getdata()。
在 HTML5 拖拽中，数据传输必须通过 event.dataTransfer 对象完成，它不能手动创建，只在 dragstart 和 drop 等事件中由浏览器自动提供。设置是否成功，关键在于时机、格式和权限三者配合。
只在 dragstart 中调用 setData()
这是唯一能写入数据的时机。其他事件（如 drag、dragover）调用 setData() 会被忽略。
- 推荐使用标准 MIME 类型，例如
"text/plain"、"text/html"或"application/json" - 避免自定义格式名（如
"myid"），否则getData()可能返回空字符串 - 同一格式多次调用会覆盖前值，比如连续两次
setData("text/plain", "a")和setData("text/plain", "b")，最终只能读到"b"
确保 drop 事件中能正确读取
getData(format) 只能在 drop（或 dragend）中使用，且 format 必须与 setData() 中完全一致。
-
dragover中调用getData()总是返回空字符串——这是浏览器强制的安全限制 - 若传入错误格式（如写入用
"text/plain"，读取用"Text"），也会返回空字符串 - 建议在
drop开头先preventDefault()，再读取，避免被默认行为中断
配合 effectAllowed 和 dropEffect 控制行为权限
仅设数据还不够，浏览器需知道“允许怎么操作”和“实际想怎么操作”，否则光标异常或放置失败。
- 在
dragstart中设置effectAllowed，声明源元素支持的操作，如"move"、"copy"或"all" - 在
dragover中设置dropEffect，告诉浏览器当前悬停时希望执行的效果，如"move" - 两者不匹配时，
dropEffect不会生效，鼠标光标仍显示为禁止符号
文件拖入要单独处理 files 属性
当用户从桌面拖入文件时，dataTransfer.files 会自动填充为 FileList，无需 setData()。
-
files是只读属性，直接遍历即可获取文件名、大小、类型 - 此时
types列表中会包含"Files"，但getData("Files")无效，必须用files访问 - 如果同时需要文本数据和文件，可分别用
setData()和files，两者互不干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
