拖拽视觉反馈需主动干预：用setDragImage自定义影像，dragover中preventDefault激活样式切换，结合动态提示与dragend收尾动画确保操作可感知。
拖拽过程中的视觉反馈不是锦上添花，而是用户操作意图的直接传达。原生拖拽默认只提供半透明快照，既不统一也不可控——想高亮目标区、替换拖拽图标、或实时显示数据状态，都得靠事件驱动的动态干预。
拖拽源的视觉控制：从半透明到自定义影像
浏览器对被拖元素自动应用的半透明效果（约0.4 opacity）无法用 CSS 覆盖，因为此时原元素已脱离渲染流。真正有效的方案只有两个：
- 调用 event.dataTransfer.setDragImage(elem, x, y)：传入一个已挂载到 DOM 的元素作为拖拽影像，x/y 是相对于该元素左上角的偏移量（常用 10, 10 让鼠标大致落在图标左上区域）
- 若不调用 setDragImage，仅能依赖 ::-webkit-drag 伪类做有限样式微调（仅 Chrome/Safari 支持，且不稳定）
- 自定义影像元素建议设置 pointer-events: none，避免拖拽中意外触发交互
目标区域的动态高亮：让“可放置”一目了然
很多开发者发现 dragenter/dragover 时加 class 没反应，根本原因是 dragover 默认被浏览器取消，不触发重绘。关键一步是：
- 必须在 dragover 事件处理器中调用 event.preventDefault() —— 这不仅解锁 drop 行为，也激活 CSS 类切换和伪类响应
- 配合 JS 添加/移除 class，例如：dropTarget.classList.add('drag-over')（在 dragenter 中）和 dropTarget.classList.remove('drag-over')（在 dragleave 中）
- 对应 CSS 可写：.drag-over { border: 2px dashed #3b82f6; background-color: #f0f9ff; }
拖拽过程中的实时状态提示
用户需要知道“正在拖什么”“能放哪儿”，光靠样式不够，文字或图标提示更直观：
立即学习“前端免费学习笔记（深入）”；
- 在 dragstart 中读取数据并缓存，例如：const draggedId = e.target.id;
- 在 dragover 中根据目标区域逻辑判断是否允许放置，然后更新浮动提示层内容，比如：tooltip.textContent = '释放可排序' / '释放可复制'
- 用 drag 事件监听拖动轨迹（非必需），结合 getBoundingClientRect() 动态定位提示层，使其跟随鼠标
拖拽结束后的视觉收尾
dragend 不只是清理时机，也是确认反馈的关键节点：
- 在 dragend 中移除所有临时 class 和提示层，避免残留样式干扰后续操作
- 若放置成功，可在目标区短暂添加 animation: drop-success 0.3s ease 类，用 CSS 动画给出“已接收”信号
- 若放置失败（如 drop 未触发或校验不通过），可给源元素添加抖动动画或红色边框提示，并恢复初始位置
