使用dnd-kit时isDragging变量更新异常，边框颜色无法切换

核心问题分析 #

你遇到的两个问题根源在于：

• 缺少拖拽上下文包裹，导致useDraggable的状态无法正常响应拖拽操作
• 拖拽元素未绑定必要的事件属性，无法触发拖拽状态切换
• 额外添加的item: {id: id}配置导致dnd-kit内部状态异常，初始就标记为拖拽中

修正步骤 #

1. 父组件添加拖拽上下文
   @dnd-kit的所有拖拽组件必须在DndContext内部才能工作，需要在父组件中导入并包裹子元素：

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

// 父组件渲染部分
return (
  <DndContext>
    {Allimages.map((ele) => (
      <Movableimg 
        key={ele.id} 
        src={ele.src} 
        id={ele.id} 
        atext={ele.atext} 
      />
    ))}
  </DndContext>
);

2. 修复Movableimg组件的拖拽事件绑定
   你的img标签没有添加useDraggable返回的attributes，这会导致拖拽事件无法触发，状态不会更新。同时移除错误的item配置：

import React from 'react';
import { useDraggable } from '@dnd-kit/core';

export default function Movableimg({ id, src, atext }) {
  const { isDragging, attributes, setNodeRef } = useDraggable({
    id: id,
    type: 'image',
  });

  return (
    <img
      ref={setNodeRef}
      {...attributes} // 必须添加这个，绑定拖拽事件
      src={src}
      alt={atext}
      style={{ 
        border: isDragging ? '5px solid pink' : 'none',
        cursor: isDragging ? 'grabbing' : 'grab' // 可选：添加拖拽时的光标反馈
      }}
    />
  );
}

为什么之前的操作会出问题？ #

• 没加DndContext：dnd-kit需要上下文来管理拖拽状态，没有的话isDragging永远不会变化
• 没加{...attributes}：这个对象包含触发拖拽的鼠标/触摸事件监听，缺少它元素不会响应拖拽操作
• 添加item: {id: id}：这是错误配置，dnd-kit的useDraggable不需要这个字段，多余配置会导致内部状态判断错误，初始就标记为拖拽中

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