How to disable dragging while resizing a card using the @dnd-kit/core library in React?

Question

I have a React component that uses the @dnd-kit/core library for dragging functionality and the re-resizable library for resizing functionality. The component consists of a card that can be both dragged and resized. However, when I try to resize the card, it also starts dragging at the same time. I want to disable dragging while the card is being resized.

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>
  );
};

The PerformanceBars component is wrapped with the CardBody component, which handles the resizing functionality.

I tried several approaches to disable dragging while resizing:

Using the activationConstraint prop of DndContext to set a high delay and tolerance when resizing is in progress. Using the modifiers prop of DndContext to pass an empty function when resizing is in progress. Passing the isResizing state as the isDragDisabled prop to the Draggable component. Modifying the Draggable component to conditionally apply the listeners and attributes based on the isResizing prop. However, none of these approaches worked as expected. The card still starts dragging when I try to resize it.

I expected the card to be resizable without triggering the dragging functionality. The desired behavior is that when I start resizing the card, dragging should be disabled until the resizing is complete.

Answer 1

To prevent dragging on state you can turn off listeners.

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

In your draggable element:

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

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