Firefox中setDragImage常失效，因其要求元素已加载完成、宽高>0、已挂载DOM且同步调用；推荐用<canvas>绘制并设偏移0,0，同时确保effectAllowed与dropEffect严格匹配。
Firefox中setDragImage为什么总失效
Firefox对setDragImage()的限制比Chrome严格得多：传入的元素必须已加载完成、宽高大于0，且不能是未渲染或未挂载的DOM节点。常见现象是拖拽时阴影空白，或根本没反应——不是代码写错，而是浏览器静默忽略。
-
setDragImage()必须在dragstart事件回调内同步调用，延迟（如setTimeout）或异步等待图片加载都会失败 - 若用
<img>，src必须已触发load事件；未加载完就调用，阴影为空白 - 推荐用
<canvas>绘制文字或简单图标：它不依赖网络加载，宽高可控，且Firefox对其支持稳定 - 别传
document.body或display: none的<div>——Firefox会直接跳过
怎么写一个Firefox友好的自定义阴影
核心是绕过图片加载不确定性，用<canvas>生成可预测的图像。关键不是“画得多漂亮”，而是确保绘制完成、尺寸明确、挂载有效。
- 创建一个
<canvas>并提前插入DOM（哪怕style="display:none"），确保它有明确宽高（如width="64" height="64"） - 在
dragstart里获取ctx，调用fillText()或drawImage()完成绘制，再立即传给setDragImage() - 偏移坐标建议设为
0, 0：Firefox对x/y解释不稳定，设为0可避免跨浏览器错位 - 示例：
const canvas = document.getElementById('drag-canvas');<br>const ctx = canvas.getContext('2d');<br>ctx.fillStyle = '#333';<br>ctx.font = '12px sans-serif';<br>ctx.fillText('→', 8, 20);<br>e.dataTransfer.setDragImage(canvas, 0, 0);
effectAllowed和dropEffect不配对会导致Firefox拖拽中断
Firefox虽不像Safari那样严格报错，但effectAllowed设错会影响setDragImage()的执行时机和权限判断。尤其当目标区dropEffect不匹配时，Firefox可能降级回默认截图。
-
e.dataTransfer.effectAllowed必须在dragstart里显式赋值，推荐'move'或'copy'，不要用'all' - 目标区
dragover回调中必须同步写e.dataTransfer.dropEffect = 'move'，类型必须与effectAllowed完全一致 - 漏掉任意一项，Firefox可能拒绝使用自定义图像，悄悄切回原元素截图
移动端和Firefox桌面版的兼容性差异
Firefox桌面版支持setDragImage()，但iOS Safari和Android Chrome基本不响应dragstart，所以“自定义阴影”这个需求本身在移动端就不成立。真实项目里，一旦检测到'ontouchstart' in window，就得放弃整套原生API。
立即学习“前端免费学习笔记（深入）”；
- 别试图在移动端调试
setDragImage()——事件压根不触发，控制台也无报错 - 降级方案必须用
touchstart/touchmove+transform: translate()模拟拖拽，阴影由绝对定位的<div>控制 - Firefox桌面版虽支持，但若页面含复杂CSS（如filter、mask）或SVG子元素，
setDragImage()仍可能回退，默认截图
setDragImage()就一定生效”。实际上它是一条脆弱链路：canvas必须已绘制、宽高必须>0、effectAllowed必须匹配、事件必须同步——任一环节卡住，Firefox就静默放弃，连警告都不抛。 
