React Dnd Kit动态获取图片拖拽事件未触发问题求助

核心问题分析 #

拖拽事件未触发的主要原因集中在拖拽项的配置不符合React Dnd Kit要求、SortableContext参数错误这两个关键点，以下是具体修复步骤：

1. 修正SortableContext的items属性 #

SortableContext的items必须传入可拖拽项的唯一id数组，而非完整的图片对象数组。当前代码传入的是图片对象数组，导致Dnd Kit无法正确识别拖拽项的标识。

修改方式（二选一）： #

方式一：直接在SortableContext中转换

<SortableContext 
  items={items.map(img => img.id)} // 提取图片id组成数组
  strategy={rectSortingStrategy}
>

方式二：更新items状态为id数组

useEffect(() => {
    setItems(images.map(img => img.id)); // 存储id数组而非对象数组
}, [images]);

若需保留图片对象用于渲染，可单独维护映射关系：

const imageMap = useMemo(() => new Map(images.map(img => [img.id, img])), [images]);

渲染时通过imageMap.get(id)获取对应图片对象。

2. 确保Image组件配置拖拽能力 #

你的Image组件必须通过SortableItem包裹，并使用useSortable钩子注入拖拽相关属性，否则无法触发拖拽事件。

修改Image组件示例： #

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

export const Image = ({ image }) => {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
    id: image.id, // 绑定唯一id
  });

  // 拖拽时的样式（可选，实现拖拽视觉反馈）
  const dragStyle = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <SortableItem id={image.id}>
      {/* 必须将setNodeRef、attributes、listeners传递给根元素 */}
      <div ref={setNodeRef} style={dragStyle} {...attributes} {...listeners}>
        <img src={image.url} alt={image.alt} />
      </div>
    </SortableItem>
  );
};

3. 修正拖拽结束后的数组重排逻辑 #

如果items是对象数组，原代码中items.indexOf(active.id)无法正确获取索引，需改为findIndex：

function handleDragEnd(event) {
    const { active, over } = event;

    if (active.id !== over.id) {
        setItems((prevItems) => {
            const oldIndex = prevItems.findIndex(item => item.id === active.id);
            const newIndex = prevItems.findIndex(item => item.id === over.id);
            return arrayMove(prevItems, oldIndex, newIndex);
        });
    }
    setActiveId(null);
}

4. 修复DragOverlay的activeId使用逻辑 #

当前DragOverlay中直接将activeId作为url是错误的，需通过id匹配对应的图片url：

<DragOverlay adjustScale={true}>
    {activeId ? (
        // 根据activeId查找对应图片
        const targetImage = images.find(img => img.id === activeId);
        <EmptyImage url={targetImage?.url} index={items.findIndex(item => item.id === activeId)} />
    ) : null}
</DragOverlay>

5. 依赖包检查 #

确保已安装所有必要依赖：

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

并正确导入所需模块：

import { DndContext, useSensors, useSensor, MouseSensor, TouchSensor, closestCenter, DragOverlay } from '@dnd-kit/core';
import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
import { arrayMove } from '@dnd-kit/utilities';

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