fn
useDraggable
v0.0.15testeddemoMake an element draggable by pointer, tracking its position with optional axis locking, a drag handle, container constraints, and lifecycle callbacks. SSR-safe and built on passive pointer listeners.
Examples
ts
const el = useTemplateRef<HTMLElement>('el');
const { x, y, style } = useDraggable(el, { initialValue: { x: 40, y: 40 } });ts
// Lock to the horizontal axis and only drag from a handle.
const { position } = useDraggable(el, { axis: 'x', handle: handleEl });Demo
Loading demo…
Signature
ts
export function useDraggable(
target: MaybeComputedElementRef,
options: UseDraggableOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
target | MaybeComputedElementRef | The element to make draggable |
options? | UseDraggableOptions | Options |
Returns
UseDraggableReturnReactive `x`, `y`, `position`, `isDragging`, and a `style` string