Draggable

import { Draggable } from "cx-diagrams"

The Draggable component wraps child nodes and enables drag-to-move behavior via mouse or touch input. The offsetX and offsetY properties should be bound to the store to persist drag positions. Each child cell can be made individually draggable, or multiple cells can be grouped inside a single Draggable to move them together as a group.

<Diagram center showGrid>
    <Flow direction="right" gap={2}>
        <Draggable
            offsetX={bind("$page.cell1.offsetX")}
            offsetY={bind("$page.cell1.offsetY")}
        >
            <Cell width={3}>
                <Shape
                    text="Drag me"
                    shapeClass="fill-blue-200 stroke-blue-600"
                />
            </Cell>
        </Draggable>
        <Draggable
            offsetX={bind("$page.cell2.offsetX")}
            offsetY={bind("$page.cell2.offsetY")}
        >
            <Cell width={3}>
                <Shape
                    text="Drag me too"
                    shapeClass="fill-green-200 stroke-green-600"
                />
            </Cell>
        </Draggable>
    </Flow>
    <Draggable
        offsetX={bind("$page.group.offsetX")}
        offsetY={bind("$page.group.offsetY")}
    >
        <Flow direction="right" gap={1} mt={3}>
            <Cell width={3}>
                <Shape
                    text="Group A"
                    shapeClass="fill-orange-200 stroke-orange-600"
                />
            </Cell>
            <Cell width={3}>
                <Shape
                    text="Group B"
                    shapeClass="fill-orange-200 stroke-orange-600"
                />
            </Cell>
        </Flow>
    </Draggable>
</Diagram>

Configuration

Property	Description	Type
offsetX	Horizontal offset in pixels. Bind this to the store to persist drag position.	number
offsetY	Vertical offset in pixels. Bind this to the store to persist drag position.	number
grow	If set, the element will grow to fill available space in the flow direction.	boolean
margin	Margin around the cell.	number
mb	Bottom margin.	number
me	End margin in the direction of the flow.	number
meAuto	If set, the end margin will be automatically calculated to fill available space.	boolean
ml	Left margin.	number
mr	Right margin.	number
ms	Start margin in the direction of the flow.	number
msAuto	If set, the start margin will be automatically calculated to fill available space.	boolean
mt	Top margin.	number
mx	Horizontal margin.	number
my	Vertical margin.	number