必须在 dragover 和 drop 事件中均调用 event.preventDefault()，否则 drop 不触发；dragover 仅需此句即可启用拖放，drop 中再取 event.dataTransfer.files 获取文件列表。
如何用 dragover 和 drop 事件监听拖放行为
浏览器默认会阻止文件拖入页面，所以必须显式调用 event.preventDefault()，否则 drop 根本不会触发。只监听 drop 不够，dragover 必须同时处理——这是最容易漏掉的一步。
常见错误现象：drop 事件完全不执行，控制台也无报错；或者拖到区域时鼠标显示“禁止”图标（圆圈加斜杠）。
-
dragover事件里必须写event.preventDefault()，仅此一句就足够让浏览器允许放置 -
drop事件里也要调用event.preventDefault()，再从event.dataTransfer.files取文件列表 - 不要在
dragenter或dragleave里做核心逻辑，它们只适合视觉反馈（比如加 class）
HTML 结构只需一个容器 + 明确的 data-transfer 意图标识
不需要额外属性或自定义标签，纯语义化 <div> 即可。重点是绑定事件和提供视觉反馈，而非结构复杂度。
<p>使用场景：上传头像、批量导入 CSV、粘贴截图转 Base64 —— 所有需要用户主动“扔进来”的操作都适用这套结构。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>给容器加 <code>id="drop-area" 或 class="drop-zone" 方便 JS 绑定，别用 name 或 data- 属性做功能判断
<div><p><span>拖放区</span></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div>），深层节点可能拦截事件冒泡<input type="file">，注意两者不要冲突；建议分离：拖放区负责拖拽，input 作为备用入口
event.dataTransfer.files 是唯一可靠来源，别信 items 或 types
Chrome/Firefox/Safari 对 dataTransfer.items 支持不一致，尤其 macOS 上拖图片进网页时，items 可能为空但 files 有值。生产环境必须以 files 数组为准。
性能影响：直接读 files 不触发 IO，只是引用；真正读取内容（如 FileReader）才需异步处理。
-
event.dataTransfer.files返回FileList，可用[...files]转为数组 - 检查空文件：
if (files.length === 0) return，防止后续报错 - 过滤非文件项（比如纯文本拖拽）：
if (!files[0]?.type) return，避免误处理剪贴板文本
CSS 视觉反馈不能只靠 :hover，得响应 dragenter 状态
用户拖着文件移入区域时，:hover 不生效（因为鼠标被系统接管），必须靠 JS 切换 class 来提示可放置。
容易踩的坑：加了 border: 2px dashed #007bff 但没在 dragenter 时添加高亮类，导致用户不知道是否“对准了”。
- 监听
dragenter添加临时 class（如is-drag-over），dragleave和drop后移除 - 用
transition: border-color 0.2s让边框变化更自然，别用display: none类切换，会导致布局跳动 - 移动端不支持原生文件拖放，这部分 CSS/JS 可加
@supports (hover: hover)隔离，避免干扰触屏逻辑
dataTransfer 的兼容性里；最常被忽略的是 dragover 中漏掉 preventDefault，一整套逻辑就卡死在第一步。
