How to Prevent Canvas Dragging While Dragging a Node in React Flow

[devvsakib]

Hi,

I want to prevent the React Flow canvas from moving or being draggable when the user starts dragging a specific icon (image shown in the discussion). However, when panOnDrag is set to true, I'm unable to drag this icon to the "plus" icon because the entire canvas becomes draggable.

I tried using event.stopPropagation, but it didn't work as expected. Here's the code I’m using:

 <Button
    type="text"
    size="small"
    title="Drag Node"
    draggable
    onDragStart={(event) => {
        event.stopPropagation()
        setNodeDragging(true); 
        event.dataTransfer.setData("nodeType", JSON.stringify({ id }));
        event.dataTransfer.effectAllowed = "move";
    }}
    onDragEnd={(event) => {
        setNodeDragging(false); 
    }}
    icon={<FontAwesomeIcon icon={faExpand} color="#ffffff70" />}
/>

<ReactFlow
    defaultEdgeOptions={{
        animated: true
    }}
    className="dark:text-white cursor-grab"
    nodes={nodes}
    edges={edges}
    nodesDraggable={false}
    nodesConnectable={false}
    nodeTypes={nodeTypes}
    edgeTypes={edgeTypes}
    zoomOnScroll={true} 
    zoomOnPinch={true} 
    panOnDrag={nodeDragging} 
    nodeDragThreshold={0}
    onNodeDrag={onNodeDrag}
    onEdgeClick={onEdgeClick}
    onConnect={onConnect}
    onInit={(instance) => {
        instance.zoomTo(1);
    }}
    onDragOver={onDragOver}
    onNodesChange={onNodesChange}
    onEdgesChange={onEdgesChange}
    deleteKeyCode={null}
    fitView={true}
    >
    <Background
        className="bg-neutral-100 dark:bg-neutral-800"
        variant="dots"
    />
</ReactFlow>

The issue is that the state (nodeDragging) is not updating properly because the canvas keeps dragging, and I cannot toggle the state from false to true.

Is there any way to achieve the expected behavior where the canvas does not move when dragging the icon?

Thank you!

[bcakmakoglu]

add the nodrag class name to elements that shouldn't be triggering drag events from inside a node.
className="nodrag"

Read more about this here.

[bcakmakoglu]

Oh my bad, in your case you want to use nopan instead of nodrag ^^

[devvsakib]

Hi, thanks man, it worked.