PHP不处理拖放限制，前端需在dragover中实时调用getBoundingClientRect()判断坐标，避免缓存失效；须条件触发preventDefault()，禁用无条件调用以防干扰滚动和选中。
PHP 本身不处理拖放区域限制——这是前端 JavaScript + CSS 的事。PHP 只负责输出 HTML 结构和初始内容，拖拽约束必须在浏览器端实现。
dragover 里实时算容器边界，别缓存 getBoundingClientRect()
很多人把 getBoundingClientRect() 结果存在变量里复用，结果滚动后坐标失效，拖拽就“飘”出容器外。必须在每次 dragover 事件中重新调用：
- 容器若可滚动（比如带
overflow-y: auto的列表），dragover触发时视口坐标和容器坐标始终对齐，clientX/Y和rect.left/top可直接比较 - 高频触发下可加简单节流：用
requestAnimationFrame或setTimeout(..., 0)延迟执行，避免每帧都算 - 别在
dragenter里调preventDefault()—— 它会因子元素冒泡反复触发，导致误判
只在合法区域内 preventDefault()，否则干扰滚动
无条件在 dragover 里写 event.preventDefault() 看似简单，但后果严重：页面无法滚动、文本无法选中、光标异常。必须加条件：
- 先用
getBoundingClientRect()获取容器矩形 - 再判断：
event.clientX >= rect.left && event.clientX = rect.top && event.clientY - 仅当为
true时才调event.preventDefault()和event.dataTransfer.dropEffect = 'move' - 建议加 ±5px 缓冲区，避免鼠标贴边时判定失败
用 CSS 配合视觉反馈，别只靠 JS 判断
用户需要明确知道“能放”还是“不能放”，光靠 JS 拦截不够直观：
立即学习“PHP免费学习笔记（深入）”；
- 在
dragover满足条件时给容器加类名（如drop-target-active），配border: 2px dashed #007bff - 在
dragleave中移除该类 —— 注意用event.relatedTarget判断是否真离开容器，避免子元素冒泡误触发 - 禁用拖拽源的文本选中：给可拖元素加
user-select: none，防止拖拽时意外选中文本 - 若容器内含内联元素（如
<span></span>），确保其display不是inline且没设white-space: nowrap，否则可能撑开边界影响坐标计算
真正容易被忽略的是：PHP 输出的 HTML 结构必须语义清晰，比如拖拽项用 draggable="true"，目标容器要有明确 class 或 id；而所有坐标逻辑都依赖这个结构稳定——一旦 PHP 动态渲染时漏了属性或嵌套错层，JS 就找不到目标元素，整个约束逻辑直接失效。
