dropzone属性已废弃，真正起作用的是dragover和drop事件中调用e.preventDefault()，且必须通过e.dataTransfer.files获取文件，子元素需设pointer-events: none确保事件穿透。
dropzone 属性本身不定义任何接收逻辑，它只是个被废弃的 HTML 属性，浏览器早已忽略它。真正起作用的是 JavaScript 事件监听和 e.preventDefault()。
dragover 里不调用 preventDefault()，drop 就永远不会触发
这是最常踩的坑：只监听 drop，却忘了在 dragover 中阻止默认行为。
- 浏览器对拖文件进页面有默认动作（打开、下载或跳转），不阻止就会直接执行，
drop被静默丢弃 -
dragover是“准入开关”，必须每帧都e.preventDefault()，否则光标始终是禁止符号，用户根本拖不进来 -
drop事件里也得调一次e.preventDefault()，防止后续默认行为干扰文件读取
示例：
const dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', e => e.preventDefault());
dropZone.addEventListener('drop', e => {
e.preventDefault();
const files = e.dataTransfer.files; // ✅ 这里才能拿到 FileList
handleFiles(files);
});
e.dataTransfer.files 是唯一可靠入口，别碰 items 或 types
dataTransfer 对象表面看属性很多，但实际稳定可用的只有 files：
-
e.dataTransfer.files返回标准FileList，和<input type="file">的一致，可直接遍历 -
e.dataTransfer.items是实验性 API，Safari 不支持getAsFile()，且类型判断复杂，容易漏文件 -
e.dataTransfer.types只是 MIME 类型字符串数组，不能读内容，也不能反推文件名或大小
所以别写这种不可靠代码：
// ❌ 错误示范 const item = e.dataTransfer.items[0]; const file = item.getAsFile(); // Safari 下可能为 null
直接用：
// ✅ 正确写法
for (let i = 0; i < e.dataTransfer.files.length; i++) {
const file = e.dataTransfer.files[i];
console.log(file.name, file.size, file.type);
}拖拽区域必须能接收事件，子元素要处理 pointer-events
常见失效场景：拖进去没反应，但代码看起来没问题。
- 容器本身没宽高或背景色，视觉上存在但 DOM 上“点不中”——加
min-height和background确保可交互 - 区域内有图标、文字等子元素，默认会拦截
dragover事件，导致事件不到达容器 - 解决方案：给子元素加
pointer-events: none，让事件穿透过去
例如：
#drop-zone img,
#drop-zone p {
pointer-events: none;
}移动端完全不支持原生 drag & drop，这个方案仅适用于桌面浏览器。如果项目需覆盖 iOS / Android WebView，得降级为点击 <input type="file">，并隐藏样式做 UI 统一。dropzone 属性残留代码（比如模板里硬写的 <div dropzone="move">）必须删掉，它既无作用又误导维护者。</div>
