Draggable

const Draggable: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & object, "ref"> & RefAttributes<HTMLDivElement>>;

A wrapper that makes its children draggable via pointer (and, when isMoveableWithArrowKeys is set, the keyboard).

By default the entire surface of the Draggable starts a drag on pointer-down. The two opt-in data-* attributes below let you refine which parts of the content are draggable. Neither is required — omit them when the whole element should be draggable.

- data-no-drag: Marks a descendant region that should *not* initiate a

drag. Add it to interactive controls nested inside the Draggable (buttons, links, inputs, sliders, menus, etc.) so they stay usable without accidentally moving the element.

- data-drag-handle: Marks a descendant that *can* initiate a drag even

when it sits inside a data-no-drag region. Use it to expose a dedicated grab handle within an otherwise non-draggable area. A focusable handle can also move the Draggable with arrow keys when isMoveableWithArrowKeys is set.

Both attributes are resolved with Element.closest, so they apply to the tagged element and everything nested within it.

Examples

// Whole card is draggable (no attributes needed):
<Draggable>
    <Card />
</Draggable>

// Card is draggable, but the close button stays clickable:
<Draggable>
    <Card>
        <button data-no-drag onClick={onClose}>Close</button>
    </Card>
</Draggable>

// Only the header acts as a drag handle inside an otherwise no-drag body:
<Draggable>
    <div data-no-drag>
        <div data-drag-handle>Drag me</div>
        <Body />
    </div>
</Draggable>

Examples​

Examples