如何确保React DnD-Kit中拖拽项始终在其他元素上方？

针对你遇到的拖拽项从上往下拖时跑到其他元素下方的问题，可通过以下几种方式解决：

1. 给拖拽中的元素（克隆体）设置高zIndex #

Dnd-Kit在拖拽时会创建一个克隆的拖拽节点，原元素仅作为占位。需要确保zIndex应用在克隆节点上，而非原元素。在SortableItem组件中，利用isDragging状态为拖拽中的元素设置高优先级zIndex：

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

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

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    // 拖拽时设置高zIndex，同时确保定位方式支持层级堆叠
    zIndex: isDragging ? 1000 : 'auto',
    position: isDragging ? 'fixed' : 'relative',
  };

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

2. 自定义克隆元素样式 #

通过DndContext的renderClone属性，直接控制克隆元素的样式，确保zIndex生效：

import { DndContext, closestCenter } from '@dnd-kit/core';
import { arrayMove, SortableContext } from '@dnd-kit/sortable';

function SortableList({ items, onSort }) {
  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (active.id !== over.id) {
      onSort(arrayMove(items, items.indexOf(active.id), items.indexOf(over.id)));
    }
  };

  return (
    <DndContext
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
      // 自定义克隆元素，强制设置高zIndex
      renderClone={(props) => (
        <div style={{ zIndex: 1000, ...props.style }}>
          {props.children}
        </div>
      )}
    >
      <SortableContext items={items}>
        {/* 渲染你的SortableItem列表 */}
      </SortableContext>
    </DndContext>
  );
}

3. 处理堆叠上下文冲突 #

如果父元素设置了transform、opacity、filter或非auto的z-index，会创建新的堆叠上下文，导致子元素zIndex失效。此时可将克隆元素挂载到body下，脱离原有上下文：

import { DndContext, Portal } from '@dnd-kit/core';

<DndContext
  // ...其他配置
  // 将克隆元素通过Portal挂载到body
  portal={(children) => <Portal>{children}</Portal>}
>
  {/* 你的列表组件 */}
</DndContext>

通过以上方法，就能确保拖拽项在整个拖拽过程中始终处于其他元素上方。

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