React中Dnd-Kit拖拽问题：高z-index下卡片仍显示在占位符下方

你当前的方法无效，核心原因是Dnd-Kit在拖拽过程中，用户实际看到的拖拽元素是框架自动创建的「拖拽预览（Drag Preview）」，而非你通过getElementById获取的原卡片DOM节点。你修改原卡片的z-index和定位样式，只会影响未拖拽状态的卡片，对拖拽时显示的预览层完全无效。

要确保拖拽卡片始终在顶层，需要直接控制Dnd-Kit的拖拽预览/覆盖层样式，以下是两种可靠实现方式：

方式1：使用DragOverlay自定义拖拽层 #

DragOverlay是Dnd-Kit提供的官方组件，专门用于自定义拖拽时的视觉元素，你可以直接给它设置最高层级的样式：

import { DndContext, DragOverlay } from '@dnd-kit/core';
import { useState } from 'react';

// 假设你有根据ID获取卡片数据的方法
const getCardById = (id: string) => {
  // 根据id返回对应卡片的内容/组件
};

function GameBoard() {
  const [activeDragId, setActiveDragId] = useState<string | null>(null);

  return (
    <DndContext
      onDragStart={(e) => setActiveDragId(e.active.id as string)}
      onDragEnd={() => setActiveDragId(null)}
    >
      {/* 你的棋盘容器、占位符、卡片组件 */}
      <DragOverlay>
        {activeDragId && (
          <div className="absolute z-[2147483647] pointer-events-none">
            {getCardById(activeDragId)}
          </div>
        )}
      </DragOverlay>
    </DndContext>
  );
}

同时，在你的卡片组件中，需要给原卡片添加拖拽时隐藏的样式（避免和预览层重叠）：

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

function Card({ id, content }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0 : 1, // 拖拽时原卡片透明隐藏
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {content}
    </div>
  );
}

方式2：通过useSortable配置默认预览样式 #

如果你不想自定义DragOverlay，可以直接在useSortable中配置默认预览的样式，强制设置高z-index：

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

function Card({ id, content }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id,
    preview: {
      style: {
        zIndex: 2147483647,
        position: 'absolute',
      },
    },
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0 : 1,
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      {content}
    </div>
  );
}

• 拖拽时必须隐藏原卡片（设置opacity:0而非display:none），否则原卡片可能会遮挡预览层，或者造成视觉闪烁
• z-[2147483647]是Tailwind的最大层级值，如果你用普通CSS，直接写z-index: 2147483647即可
• 确保占位符的z-index低于拖拽层，避免占位符覆盖拖拽卡片

内容的提问来源于stack exchange，提问作者labelle