背景#

在给拼图怪加画布内图片拖拽调换功能时，遇到了一个典型的”浏览器啥也不说就是不工作”的问题。

症状#

• 图库拖到画布：正常
• 画布内拖拽互换：完全不触发 drop
• 控制台只有：dragstart → dragend（中间没有 dragover、没有 drop）

根因#

HTML5 Drag & Drop 规范有一条规则：

dragstart 设置 effectAllowed，dragover 设置 dropEffect。浏览器在触发 drop 之前会检查两者是否兼容。不兼容就直接丢弃 drop，没有任何错误提示。

检查代码发现：

1
cell dragstart: effectAllowed = 'move'
2
wrap dragover:  dropEffect = 'copy'     ← 硬编码
3
cvs dragover:   dropEffect = 'copy'     ← 也是硬编码
4
→ 浏览器：'move' vs 'copy' 不兼容 → 拒绝 drop

修复#

1
// 所有 dragover handler 改为动态匹配
2
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed === 'move' ? 'move' : 'copy';

次要问题#

还有第二个坑：reorderPhotos() 直接调用 render() 替换 canvas.innerHTML，DOM 元素在拖拽过程中被替换了，浏览器的拖拽状态也被重置了。

修复方案：用 pendingReorder 标记，延迟到 dragend 才调 render()。

教训#

HTML5 Drag & Drop 的调试要点：

1. drop 不触发 → 先查 effectAllowed 和 dropEffect 是否兼容
2. 事件冒泡链上最后的 dropEffect 是生效值
3. DOM 替换在拖拽过程中会破坏浏览器拖拽状态
4. 调试方法：dragenter、dragover、dragleave、drop 四个事件都加 console.log