Draggable
Code
| 1 | const { |
| 2 | ref, isDragging, isGrabbed, position, progress, velocity, |
| 3 | setX, setY, reset, enable, disable, refresh, |
| 4 | } = useAnimeDraggable({ |
| 5 | container: containerRef.current, |
| 6 | containerPadding: 16, |
| 7 | snap: 50, |
| 8 | releaseStiffness: 120, |
| 9 | releaseDamping: 20, |
| 10 | onGrab: () => {}, |
| 11 | onDrag: () => {}, |
| 12 | onRelease: () => {}, |
| 13 | onSnap: () => {}, |
| 14 | onSettle: () => {}, |
| 15 | }) |
Physics-based drag with snap, spring release, container bounds, and programmatic controls.
Live previewOpen Playground
DraggableSnap · Spring · Controls
Idle
Drag
x:0 y:0vx:0 vy:0
Props
| Name | Type | Default | Description |
|---|---|---|---|
| container | DraggableBounds | - | Container element for bounds |
| containerPadding | number | number[] | 0 | Padding inside container |
| containerFriction | number | 0.85 | Friction against container bounds (0-1) |
| releaseStiffness | number | 80 | Spring stiffness on release |
| releaseDamping | number | 20 | Spring damping on release |
| releaseMass | number | 1 | Mass for spring physics |
| snap | number | DraggableSnap | - | Snap interval or per-axis config |
| trigger | string | HTMLElement | - | CSS selector for drag handle |
| x | DraggableAxisParams | boolean | - | X-axis config (false to disable) |
| y | DraggableAxisParams | boolean | - | Y-axis config (false to disable) |
| dragSpeed | number | 1 | Drag movement speed multiplier |
| dragThreshold | number | 0 | Min px before drag activates |
| velocityMultiplier | number | 1 | Release velocity multiplier |
| releaseEase | Easing | outQuint | Release animation easing |
| cursor | boolean | DraggableCursorParams | true | Cursor style config |