dragover 事件必须调用 event.preventdefault() 才能启用高亮和 drop 功能，否则浏览器默认阻止；应优先使用 dragover 而非 dragenter，并通过 closest() 定位目标元素，用 class 切换配合 css 过渡实现稳定高亮。
dragover 里不写 event.preventDefault()，高亮根本不会生效
浏览器默认会阻止绝大多数元素接收 drop 事件，dragover 不调用 event.preventDefault()，后续的 drop 就不会触发，连带视觉反馈也压根不会出现——这不是样式没写对，是事件被浏览器直接拦了。
常见错误是只监听 dragenter，但它只在首次进入时触发一次；拖着绕圈、悬停、反复进出都不会再触发，导致高亮“一闪就消失”或“卡死不收”。真正该依赖的是高频触发的 dragover，但前提是它必须被允许继续执行。
-
dragover事件回调第一行必须写event.preventDefault() - 仅靠
dragenter+dragleave在复杂 DOM（比如目标框里有子元素）下极易误判，dragover更稳定 - 如果目标区域用了
display: none或pointer-events: none，事件根本传不到，高亮自然失效
用 class 切换而非 inline style 控制高亮样式
直接改 element.style.border 或 style.backgroundColor 容易被 CSS 优先级覆盖，且难以复用、难维护。推荐统一用 class 控制，配合 CSS 过渡动画让高亮更自然。
例如定义一个 .drop-target--active 类，在 CSS 中写好边框、背景、阴影等效果，再通过 JS 动态添加/移除。这样既可复用，又能利用 CSS 的 transition 实现平滑入场/退场。
- 避免在
dragover里反复设置style属性，性能差且易出竞态 - 不要用
setAttribute('style', ...)，它会覆盖其他内联样式 - 移动端需额外加
touch-action: manipulation，否则拖拽可能被系统手势拦截
拖拽文字时 target 是 text node，不是容器本身
用户拖选一段文字后松手，event.target 往往是文本节点（#text），而不是你期望的 <div class="drop-target">。直接在 <code>dragover 里对 event.target 操作 class，大概率失败。
正确做法是：从 event.target 向上遍历父节点，找到最近的、带特定 class 或 data 属性的容器元素。比如用 event.target.closest('.drop-target')，确保操作对象是你预设的目标区域。
- 别假设
event.target就是目标框，尤其当拖拽源是段落、列表项或富文本内容时 - 如果目标框用了
contenteditable，注意其内部结构可能嵌套多层 span/p/div，closest()是最稳妥的定位方式 - 避免用
parentNode硬跳，层级一变就断
PHP 输出的 HTML 里要预留可拖拽标记和 drop 区域
PHP 本身不处理拖放逻辑，但它生成的 HTML 必须为前端 JS 提供明确的锚点：哪些元素可拖（draggable="true"）、哪些区域可接收（带 class="drop-target" 或 data-drop="true"）。否则 JS 无从下手。
典型 PHP 输出片段示例：
<?php $text = "拖我试试"; echo '<p draggable="true" class="draggable-text">' . htmlspecialchars($text) . ''; echo '<div class="drop-target" data-label="文字投放区"></div>'; ?>
-
draggable="true"必须显式写出，<p></p>默认不可拖 - 输出前务必用
htmlspecialchars()转义内容，防止 XSS，否则用户拖带 script 标签的文本进来会执行代码 - 不要在 PHP 里拼接 JS 逻辑，把交互行为完全交给前端，PHP 只负责结构和初始数据
