Common types

A value, a getter or any ref (writable, shallow, computed, readonly — e.g. from useTemplateRef) that the library only reads. Unlike Vue's MaybeRefOrGetter it accepts Ref<string> where string | number is expected.

A value or any ref, for options where a function is a value of its own (an overlay component, an accept rule, a custom animation), so a getter can't be told apart. Hold components in a shallowRef (or a computed): Vue must not make them reactive.

The element a composable works on (makeDraggable(target)): the element, a template ref (useTemplateRef) or a getter. It may change (a v-if): the library follows it.

An element: an HTML or SVG element, or a component instance (its root element, $el), as a template ref gives them. null or undefined while there is none (not mounted yet).

An id or a key: of a draggable, a drop target, a list, an item of a list.

A point or an offset, in px: a position from the viewport's top-left corner, or an offset from where the drag started (delta, transform).

A width and a height, in px.

A box in px, in viewport coordinates, as getBoundingClientRect() gives it.

What the provider is doing:

• 'idle': nothing;
• 'activating': a press waits for its activation constraint (a distance, a long press);
• 'dragging': a drag runs;
• 'dropping': a drop is decided (an async onBeforeDrop), or an overlay still lands;
• 'selecting': a selection area draws its band.

How a drag moves, whichever sensor drives it (SensorActivation.type): 'pointer' follows points, 'keyboard' moves by items.

The kind of pointer that pressed (PointerEvent.pointerType): activation is set per kind.

A value, or a promise of it: what a hook that may be async returns (onBeforeDrop).