如何在使用re-resizable调整大小时禁用dnd-kit拖拽功能

你的问题核心在于状态更新的异步性和事件冒泡：点击resize手柄时，mousedown事件会先触发dnd-kit的拖拽逻辑，之后才会执行handleResizeStart更新状态，此时拖拽已经启动，后续状态变化无法阻止已触发的拖拽行为。

正确修复需要同时解决这两个问题：

• 利用dnd-kit内置的disabled属性直接禁用拖拽，而非移除listeners
• 在resize开始时阻止事件冒泡，避免触发父元素的拖拽事件

修改后的代码如下：

import React, { useState } from "react";
import { useDraggable } from "@dnd-kit/core";
import { Resizable } from "re-resizable";

const CustomStyle = {
  display: "flex",
  width: "140px",
  height: "140px",
  backgroundColor: "#e8e8a2",
};

export function Draggable({ id, content, styles }) {
  const [isDraggingDisabled, setIsDraggingDisabled] = useState(false);
  
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id,
    disabled: isDraggingDisabled, // 通过disabled属性控制拖拽禁用
  });

  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
      }
    : {};

  const handleResizeStart = (e) => {
    e.stopPropagation(); // 阻止事件冒泡到父div，避免触发dnd-kit的mousedown
    setIsDraggingDisabled(true);
  };

  const handleResizeStop = () => {
    setIsDraggingDisabled(false);
  };

  return (
    <div
      ref={setNodeRef}
      style={{ ...style, ...styles }}
      {...listeners}
      {...attributes}
    >
      <Resizable
        style={{ ...CustomStyle }}
        defaultSize={{
          width: 200,
          height: 200,
        }}
        onResizeStart={handleResizeStart}
        onResizeStop={handleResizeStop}
      >
        {content}
      </Resizable>
    </div>
  );
}

关键改动说明：

1. 将状态改为isDraggingDisabled，直接传给useDraggable的disabled参数，让dnd-kit内部处理禁用逻辑，比动态移除listeners更可靠
2. 在handleResizeStart中添加e.stopPropagation()，从根源上阻止resize手柄的事件触发父元素的拖拽逻辑
3. 保留完整的listeners和attributes，依赖dnd-kit的disabled属性实现拖拽禁用，避免状态更新异步带来的延迟问题

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