Drag & physics

Draggable

Grab it, throw it. Momentum carries it, the walls bounce it back with rubber-band resistance, snap points catch it.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

import { Draggable } from '@vizzele/react';

<div className="arena">
  <Draggable bounds="parent" elastic={0.35} rotate={6} stretch={0.4} className="card">
    Throw me
  </Draggable>
</div>

Props

Prop	Type	Default	Description
`axis`	`'x' \| 'y' \| 'both'`	`'both'`	Restrict movement to one axis.
`lockDirection`	`boolean`	`false`	Lock to the axis the gesture starts on.
`bounds`	`'parent' \| HTMLElement \| Partial<Bounds>`	—	Keep it inside an element or px limits.
`elastic`	`number`	`0.35`	Rubber-band resistance past bounds (0 = hard wall).
`momentum`	`boolean`	`true`	Keep gliding after release.
`power`	`number`	`1`	Throw distance multiplier.
`timeConstant`	`number`	`0.4`	Glide duration (s).
`snap`	`{ x?, y?, points? }`	—	Snap values per axis or 2D points.
`returnToOrigin`	`boolean`	`false`	Spring back on release.
`handle`	`string \| HTMLElement`	—	Only drag from this child.
`rotate`	`number`	`0`	Tilt (deg) with horizontal speed.
`stretch`	`number`	`0`	Rubber stretch along the velocity (0–1).
`keyboard`	`number \| false`	`16`	Arrow-key step in px.
`spring`	`SpringConfig \| SpringPreset`	`'liquid'`	Spring for snapping, bouncing and returning.
`onStart / onMove / onEnd / onRest`	`(state: DragState) => void`	—	Lifecycle. Return false from onEnd to drive the release yourself.

Usage

Props

Accessibility