dropzone属性已彻底失效，所有主流浏览器自2018年起均不再支持，配置无效；真正起作用的是监听dragover事件并同步调用e.preventdefault()来申请拖放权限，否则drop事件永不触发。
dropzone 属性已彻底失效，所有主流浏览器（Chrome、Firefox、Edge、Safari）自 2018 年起均不再支持，配置它没有任何作用。
为什么 dropzone="copy" 这类写法完全没反应
浏览器直接忽略 dropzone 属性，既不报错也不触发任何行为——这比报错更难排查。你写 <div dropzone="copy">，DOM 里看着存在，但 JS 里查 <code>element.dropzone 是 undefined，事件监听也收不到任何相关信号。
- Chrome 66+、Firefox 59+ 已移除该属性支持（截至 2026 年仍无回归迹象）
- 即使在旧版文档里看到
move/link值，实际也无法控制拖放效果 - 移动端 WebView（iOS Safari、Android Chrome）本就不支持原生 drag & drop，
dropzone更无意义
真正起作用的是 dragover + preventDefault()
合法拖放目标不是靠 HTML 属性“声明”，而是靠 JS 在 dragover 事件中同步调用 e.preventDefault() 来“申请权限”。没有这一步，drop 事件永远不会触发。
- 只监听
dragover就够了，不必额外处理dragenter（避免重复触发和状态混乱） -
preventDefault()必须在事件回调内同步执行，异步延迟调用无效 - 如果目标区域要区分
copy/move效果，需配合e.dataTransfer.dropEffect = 'copy'，但这只是光标样式提示，不改变实际行为
const target = document.getElementById('drop-area');
target.addEventListener('dragover', e => {
e.preventDefault(); // 关键：没有这行，后面全白搭
});
target.addEventListener('drop', e => {
e.preventDefault();
const files = e.dataTransfer.files; // 拖入的文件列表
const text = e.dataTransfer.getData('text/plain'); // 拖入的文本
});
draggable="true" 和 dropzone 的常见混淆点
很多人以为只要给源元素设 draggable="true"、再给目标加 dropzone 就能跑通，结果全程静默失败。真实依赖链是：
- 源元素必须有
draggable="true"（图片/链接默认已有） - 源元素的
dragstart事件里必须调用e.dataTransfer.setData()，否则目标拿不到数据 - 目标元素必须监听
dragover并同步preventDefault() - 目标元素监听
drop时仍需preventDefault()，否则可能触发页面跳转或下载
跨 iframe 拖拽（如从 CodePen 编辑器拖内容）会因同源策略导致 e.dataTransfer 为空，这不是 dropzone 能绕过的限制。
