要让拖拽显示自定义图标，必须在dragstart事件中调用dataTransfer.setDragImage()，传入已加载完成的img/canvas/svg元素及合理偏移量，并确保先调用setData()；移动端不支持该API，需降级处理。
想让拖拽时显示自定义图标，而不是默认的半透明缩略图或“禁止”符号，关键在 dataTransfer.setDragImage() 方法。它不难用，但有几处细节必须注意，否则容易失效。
必须传入有效的图片对象
setDragImage 接收三个参数：图片元素、x 偏移、y 偏移。第一个参数不能是 URL 字符串或空对象，必须是已加载完成的 <img> 元素、<canvas> 或 <svg>。
- 推荐做法：提前创建 img 元素并监听
load事件，等加载完成再调用 setDragImage - 如果图片未加载完成就传入（比如 src 刚设还没触发 load），浏览器会回退到默认拖影，不会报错
- 也可用 canvas 绘制简单图标（如带文字的小方块），避免网络请求依赖
偏移坐标要合理，否则图标“消失”
x 和 y 是相对于图片左上角的偏移量，用于指定鼠标指针在图标中的锚点位置。常见错误是设成负数或过大值，导致图标完全偏离可视区域。
- 典型安全值：x = 0, y = 0（鼠标指向图标左上角）
- 若希望鼠标指针对准图标中心，可设 x = width/2, y = height/2
- 传入超出图片尺寸的坐标不会报错，但可能让图标不可见——建议先 console.log 图片宽高再计算
dragstart 中调用才生效
setDragImage 只能在 dragstart 事件处理函数中调用，且必须在 setData() 之后（顺序无关紧要，但两者都得有）。
立即学习“前端免费学习笔记（深入）”；
- 在 dragover 或 drop 里调用无效
- 即使只设空字符串 setData('text/plain', '')，也必须存在，否则整个拖拽链会静默失败，setDragImage 自然也不起作用
- 不建议在 dragstart 中动态创建图片后立即 setDragImage——务必等 load 完成
移动端不支持，需降级处理
原生 setDragImage 在 iOS Safari 和 Android Chrome 中均不生效。如果项目需兼容移动端，不能依赖此 API 实现视觉反馈。
- 可行方案：拖拽开始时用 CSS 添加伪元素或绝对定位的提示层模拟拖影
- 或直接禁用移动端拖拽，改用长按 + 手势移动等替代交互
- 可通过
'ontouchstart' in window快速判断是否为触屏设备
