useDraggable

v0.0.14testeddemo

Make 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.

Source Tests

Examples

const el = useTemplateRef<HTMLElement>('el');
const { x, y, style } = useDraggable(el, { initialValue: { x: 40, y: 40 } });

// Lock to the horizontal axis and only drag from a handle.
const { position } = useDraggable(el, { axis: 'x', handle: handleEl });

Demo

Loading demo…

Signature

export function useDraggable(
  target: MaybeComputedElementRef,
  options: UseDraggableOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef`	—	The element to make draggable
`options`?	`UseDraggableOptions`	`{}`	Options

Returns

UseDraggableReturnReactive x, y, position, isDragging, and a style string

Property	Type	Default	Description
`x`	`Ref<number>`	—	Current x position.
`y`	`Ref<number>`	—	Current y position.
`position`	`Ref<Position>`	—	Current position as a `{ x, y }` object.
`isDragging`	`ComputedRef<boolean>`	—	Whether a drag is currently in progress.
`style`	`ComputedRef<string>`	—	Ready-to-bind inline `style` string positioning the element.