关键在于正确设置effectAllowed和dropEffect：前者在dragstart中声明允许的操作类型并限制边界，后者在dragover中指定目标意图且需preventDefault()配合，二者交集决定最终拖放效果。
要让拖拽操作有明确的视觉反馈和行为约束，关键在于正确设置 effectAllowed 和 dropEffect —— 它们不是可选装饰，而是控制拖放逻辑的核心开关。
effectAllowed：源头的“许可清单”
它在 dragstart 事件中设置，声明被拖元素**允许执行哪些操作**。这个值决定了目标区域能响应什么效果，也直接影响光标样式是否生效。
- 常见取值：
move（移动）、copy（复制）、link（链接）、none（禁止拖放）、all（全部允许） - 必须写在
dataTransfer上：e.dataTransfer.effectAllowed = 'move' - 设为
none时，整个拖拽流程会被浏览器直接拦截，连dragover都不会触发 - 不设置或设为
uninitialized，等价于all，但建议显式声明，避免行为歧义
dropEffect：目标的“实时反馈”
它在 dragover 事件中设置，告诉浏览器“当前悬停位置打算怎么处理这次拖拽”。这个值只有和 effectAllowed 兼容时，光标和逻辑才真正起作用。
- 必须配合
e.preventDefault()才生效，否则浏览器会忽略该设置 - 可选值与
effectAllowed相同，但含义是“目标想做的动作”，不是“源允许的动作” - 例如：源设
effectAllowed = 'copy'，目标却设dropEffect = 'move'→ 光标仍显示为禁止（not-allowed），拖放被拒 - 实际开发中，常根据业务逻辑动态切换：
e.dataTransfer.dropEffect = isShiftDown ? 'copy' : 'move'
两者配合的关键规则
它们不是独立工作的，而是一对协同约束：源端定边界，目标端选动作，最终效果由交集决定。
立即学习“前端免费学习笔记（深入）”；
-
effectAllowed = 'move'→ 目标只能设dropEffect = 'move'，设copy无效 -
effectAllowed = 'copyMove'→ 目标可自由选copy或move，取决于用户按键（如 Ctrl/Cmd 按下时设为copy） -
effectAllowed = 'none'→ 无论目标怎么设，拖拽全程无反应 - 目标未监听
dragover或没调preventDefault()→dropEffect不生效，drop事件根本不会触发
实用小技巧
别只靠默认行为，加点细节让交互更可靠：
- 在
dragstart里顺便设个拖拽图像：e.dataTransfer.setDragImage(img, 0, 0)，避免默认半透明快照难辨认 - 用
dragenter/dragleave切换目标区域高亮样式，比单靠光标更直观 - 在
drop事件里，记得再次检查e.dataTransfer.dropEffect，按实际意图处理数据（比如move就移除原节点，copy就 clone 后插入） - Firefox 要求必须在
dragstart中调用setData()，否则拖拽可能静默失败
