如何在 React 中使用 @dnd-kit/core 库调整卡片大小时禁用拖动？

Question

我有一个 React 组件，它使用

@dnd-kit/core

库来实现拖动功能，并使用

re-resizable

库来实现调整大小功能。该组件由一张可以拖动和调整大小的卡片组成。但是，当我尝试调整卡片大小时，它也会同时开始拖动。我想在调整卡片大小时禁用拖动。

const Cards = () => {
  return (
    <DndContext>
      <div className="flex flex-col space-y-4 w-screen h-screen bg-slate-300 p-5">
        <Draggable id={1}>
          <PerformanceBars />
        </Draggable>
      </div>
    </DndContext>
  );
};

PerformanceBars 组件包含在 CardBody 组件中，后者处理调整大小功能。

我尝试了几种方法来在调整大小时禁用拖动：

使用DndContext的activationConstraint属性在调整大小时设置高延迟和容忍度。 在调整大小时，使用 DndContext 的修饰符属性传递一个空函数。 将 isResizing 状态作为 isDragDisabled 属性传递给 Draggable 组件。 修改 Draggable 组件以根据 isResizing 属性有条件地应用侦听器和属性。 然而，这些方法都没有达到预期的效果。当我尝试调整卡片大小时，卡片仍然开始拖动。

我希望卡片可以调整大小而不触发拖动功能。理想的行为是，当我开始调整卡片大小时，应禁用拖动，直到调整大小完成。

Answer 1

为了防止拖动状态，您可以关闭侦听器。

    const [isDraggingTurnOn, setIsDraggingTurnOn] = useState(true);

在可拖动元素中：

    const listenersOnState = isDraggingTurnOn ? { ...listeners } : undefined;

    return (
      <div style={style} {...attributes} {...listenersOnState}>
       ...
      </div>
    )