限制拖拽区域需在dragover事件中用getBoundingClientRect()获取容器坐标，对比clientX/Y判断鼠标是否在范围内，仅在此时调用preventDefault()并设置dropEffect。
限制拖拽区域的关键在于拦截 dragover 事件并动态判断鼠标位置是否在允许范围内，再通过 event.preventDefault() 控制是否允许放置。HTML5 拖拽 API 本身不提供内置约束机制，需结合坐标计算与条件判断手动实现。
监听 dragover 并阻止默认行为
浏览器默认只允许在可编辑元素或表单控件上释放拖拽项，要启用自定义区域的拖放，必须在目标容器的 dragover 事件中调用 preventDefault()。但注意：不能无条件调用，否则会干扰其他逻辑（如滚动、文本选择）。
- 仅当鼠标位于合法区域内时才调用
preventDefault() - 建议同时设置
event.dataTransfer.dropEffect = 'move'或'copy'，明确反馈操作类型 - 避免在
dragenter中调用preventDefault()，它可能被多次触发，造成误判
获取拖拽边界并做坐标判断
使用 getBoundingClientRect() 获取目标容器的可视区域坐标，再对比 event.clientX 和 event.clientY 是否落在该矩形内：
-
注意滚动影响：
clientX/Y是视口坐标，getBoundingClientRect()返回的也是视口坐标，二者可直接比较，无需额外处理滚动偏移 - 示例判断逻辑：
const rect = container.getBoundingClientRect();<br> const inBounds = event.clientX >= rect.left &&<br> event.clientX <= rect.right &&<br> event.clientY >= rect.top &&<br> event.clientY <= rect.bottom; - 若需支持边缘吸附或预留缓冲区，可在比较时加减像素值（如 ±10px）
动态更新约束区域（如可滚动容器）
当目标区域内容可滚动、尺寸会变化（例如列表加载更多），需在 dragover 中实时计算边界，而不是仅在初始化时缓存 rect：
立即学习“前端免费学习笔记（深入）”；
- 每次
dragover都重新调用getBoundingClientRect() - 对高频触发的
dragover可加简单节流（如 16ms 间隔），避免重复计算影响性能 - 若容器尺寸由 CSS 动画改变，需监听
transitionend后刷新边界缓存
配合 dragleave 处理区域退出
当鼠标移出合法区域时，应清除视觉反馈（如高亮边框）并重置 dropEffect，提升用户体验：
- 在
dragleave中移除临时样式类、重置光标样式 - 注意：
dragleave可能因子元素冒泡被频繁触发，可用event.relatedTarget判断是否真正离开容器 - 推荐写法：
if (!container.contains(event.relatedTarget)) { /* 确实离开了 container */ }
