```ts const Draggable: ForwardRefExoticComponent & HTMLAttributes & object, "ref"> & RefAttributes>; ``` 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. ```ts - 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. ```ts - 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 ```ts // Whole card is draggable (no attributes needed): ``` ```ts // Card is draggable, but the close button stays clickable: ``` ```ts // Only the header acts as a drag handle inside an otherwise no-drag body:

Drag me

```