HTML5 原生拖拽的幽灵图片坑：用 1×1 离屏 div 彻底接管拖拽视觉

在某个后台管理系统里，我用 HTML5 原生拖拽 API 实现了一个可排序卡片列表——不依赖 dnd-kit 或 react-dnd，就用 draggable + onDragStart + onDrop。逻辑跑通了，但视觉效果极丑：被拖起的元素旁边跟着一个半透明的截图幽灵，和我自己写的虚线边框高亮叠在一起，两套视觉互相打架，一点都不像"精心设计过的交互"。

现象

拖动时，浏览器自动生成一张拖拽元素的半透明截图跟随鼠标
截图位置和我自定义的 opacity: 0.4 暗化效果同时出现，视觉上非常噪
当被拖元素有 transform、嵌套复杂子树、或部分被滚动容器裁切时，幽灵截图还会发生变形或位置偏移
整体感觉是浏览器"网页味"，而非原生 App 质感

根因

HTML5 拖拽规范在 dragstart 阶段强制生成一张预览图（drag ghost image）：浏览器同步截取拖拽源元素的位图快照，以半透明方式跟随鼠标。这个图像不能通过 CSS 直接样式化，和 :hover、::before 完全无关。

规范同时提供了一个出口：event.dataTransfer.setDragImage(element, offsetX, offsetY)，允许指定任意 DOM 元素作为替代预览。

核心技巧：把一个 1×1 的透明 div 放在屏幕外（top: -9999px），作为替代预览传入。浏览器"设置"了拖拽图，但用户完全看不见它。然后由你自己用 CSS 类控制原始元素和放置目标的视觉状态。

坑：不能用 display:none 的元素做替代

一个很自然的想法是 ghost.style.display = 'none'——隐藏不就行了？不行。部分浏览器（Chromium）拒绝把不可见元素用作拖拽图，会回退到默认幽灵截图，等于没改。

必须用 position: fixed; top: -9999px 把元素移到视口外，而不是把它隐藏掉。

另一个容易忽略的细节：这个离屏 div 必须在 dragstart 事件执行期间就已挂入 DOM，因为浏览器在调用 setDragImage 时同步截图。截图完成后可以立刻删除它——用 requestAnimationFrame 延一帧清理即可，不会影响已经捕获的快照，也不会内存泄漏。

正解

改造 dragstart 处理器：

const handleDragStart = useCallback((e: React.DragEvent, itemId: string, fromIdx: number) => {
  setDragState({ itemId, fromIdx })
  e.dataTransfer.effectAllowed = 'move'
 
  // 用 1×1 离屏 div 替换默认幽灵截图
  const ghost = document.createElement('div')
  ghost.style.cssText = 'position:fixed;top:-9999px;width:1px;height:1px'
  document.body.appendChild(ghost)
  e.dataTransfer.setDragImage(ghost, 0, 0)
  requestAnimationFrame(() => ghost.remove())
}, [])

配合 CSS 状态类驱动视觉反馈：

<div
  draggable
  onDragStart={(e) => handleDragStart(e, item.id, idx)}
  onDragOver={(e) => handleDragOver(e, idx)}
  onDrop={(e) => handleDrop(e, item.id, idx)}
  onDragEnd={handleDragEnd}
  className={`
    flex items-center gap-2 px-2 py-1.5 rounded border cursor-grab
    active:cursor-grabbing transition-all
    ${dragState?.itemId === item.id && dragState.fromIdx === idx
      ? 'opacity-40 bg-muted border-muted'           // 被拖起的元素
      : dragOverIdx === idx
        ? 'border-primary border-dashed bg-primary/10' // 放置目标
        : 'bg-primary/5 border-primary/20'             // 静止状态
    }
  `}
>

正解：三态 CSS + 离屏 ghost 完全接管拖拽视觉

拖拽源 → opacity-40 暗化；放置目标 → 虚线边框 + 主色调底；静止 → 默认样式。三态全部由 React state 驱动，浏览器默认幽灵截图被 1×1 离屏 div 吃掉，视觉干净无叠影。

实测注意点

此方案适用于直接使用 HTML5 DnD API 的场景（原生 draggable 属性 + 事件）
不适用于 dnd-kit、react-dnd、Vue Draggable 等封装库——它们内部已经处理了幽灵图问题
如需浮动跟手预览（floating preview at cursor），可额外渲染一个 position:fixed 组件绑定到 mousemove，与此方案正交，互不干扰

一句话外卖

HTML5 拖拽幽灵图不能被 CSS 样式化，但可以被 setDragImage 换掉——传入 1×1 离屏 div，再用自己的 CSS 状态类接管全部视觉反馈。