拖拽区域必须用 position: relative 包裹容器，否则 drop-area 脱离文档流导致布局错乱、响应式失效、滚动异常；需在 dragover 中调用 preventDefault() 以启用拖拽事件；应使用 transform: translate() 实现顺滑反馈动画，并基于容器边界而非视口做坐标校验。
拖拽区域必须用 position: relative 包裹容器
直接把 drop-area 设为 absolute 或 fixed 是错的——它会脱离文档流，导致后续布局错乱、响应式失效，且无法随父容器滚动。真正需要定位的是容器本身：给包裹 drop-area 的外层 div 加 position: relative，这样内部所有基于 left/top 或 transform 的交互逻辑才有稳定基准。
常见错误现象：drop-area 在滚动页面时“飘走”、在 flex 布局中不居中、响应式缩放后位置偏移。这些几乎都源于父容器没设 position: relative，浏览器被迫向上找定位上下文，最终落到 body 上——而 body 默认有 margin，还可能被 JS 动态修改。
- 别给
body或html设margin/padding，否则即使加了relative，top: 0也不贴顶 - 如果容器本身是 flex 或 grid 子项，确保它没被
align-self或justify-self干扰定位上下文 - 移动端 Safari 对
position: relative在某些嵌套场景下有渲染延迟，建议加will-change: transform提前触发图层提升
dragover 事件里必须调用 event.preventDefault()
这是拖拽上传能触发高亮反馈的关键一步。没有它，浏览器会执行默认行为（比如打开文件、跳转链接），drop-area 永远收不到 dragenter 和 drop 事件，更别说样式切换了。
注意：这个 preventDefault() 必须在 dragover 里调，不能只写在 dragenter 里——因为 dragover 每秒触发多次，是唯一持续有效的钩子；dragenter 只触发一次，不够用。
立即学习“前端免费学习笔记（深入）”；
- 别漏掉
dragleave的清理逻辑，否则用户拖出区域后，高亮样式残留 - 移动端需额外监听
touchstart+preventDefault()，否则 iOS Safari 会触发页面缩放或菜单弹出 - 如果区域内含可点击元素（如按钮、链接），它们的
pointer-events: none要谨慎设置，避免阻断拖拽事件冒泡
用 transform: translate() 替代 left/top 实现拖拽反馈动画
当用户拖着文件在区域内移动时，想让预览图或占位图标跟随鼠标滑动，直接改 style.left 和 style.top 会频繁触发 layout，卡顿明显。现代做法是用 transform: translate(x, y)，只影响合成层，顺滑且不干扰布局。
关键点在于坐标映射：不要直接用 event.clientX，要减去容器左上角偏移，再减去元素自身宽高的一半（实现鼠标指针居中对齐）。
- 用
container.getBoundingClientRect()获取容器视口坐标，比offsetLeft/offsetTop更准（不受缩放、transform 影响） - 首次
dragenter时缓存拖拽元素尺寸，避免每次重读getBoundingClientRect() - 结束拖拽后，不必把
transform值“固化”回left/top—— 保留transform更轻量，也方便后续动画过渡
边界校验必须基于容器而非视口
很多实现把拖拽限制写成 Math.max(0, Math.min(x, window.innerWidth - width))，结果在小屏或缩放后，元素总被“卡”在右下角外。问题在于：拖拽区域是容器内的局部空间，不是整个屏幕。
正确做法是读取包裹容器的 getBoundingClientRect()，用它的 width 和 height 做边界，再结合拖拽元素自身的 getBoundingClientRect().width/height 计算最大偏移。
- 别用
offsetWidth/offsetHeight，它们不包含 CSStransform缩放，会导致边界计算失准 - 如果容器设置了
padding或border，记得从容器尺寸里减去，否则拖拽元素会“撞墙” - 滚动时容器位置变化，所以每次拖拽都要重新读
getBoundingClientRect()，不能缓存一次用到底
拖拽上传区域的“高度可定制”不在视觉样式，而在定位上下文是否可控、事件拦截是否干净、坐标映射是否精准——这三个地方一松动，所有自定义都会塌陷。
