Drag Elements
Drag any html element — image, div, video — around freely in a container.
Installation
1pnpm dlx shadcn add @fancy/drag-elements
Usage
You only need to wrap your elements with the DragElements component, everything else is taken care of by the component itself.
Under the hood, the component wraps all the children in a relative container, then sets all children to absolute to allow free dragging. For the dragging events and logic it uses motion`s Drag gestures.
The children are constrained to move withing the container, but you can set the dragConstraints prop to define a custom container, or custom top, bottom, left and right value. For the other drag props, refer to motion's Drag gestures documentation.
In the demo above, the dragMomentum prop is set to false to disable the "physics-based" movement, but in the following example, you can see a more funky use-case where it is enabled.
Examples
Drag momentum
Notes
If you use images, or videos, make sure to set the draggable attribute to false, as they have priority for drag events.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | React.ReactNode | - | The elements to be dragged |
| dragElastic | number | { top?: number; left?: number; right?: number; bottom?: number } | boolean | 0.5 | Determines how much the element can be dragged outside the constraints |
| dragConstraints | { top?: number; left?: number; right?: number; bottom?: number } | React.RefObject<Element> | - | An object with top, left, right, bottom properties, or a ref to another element, to constrain the drag area |
| dragMomentum | boolean | true | If true, the element will continue moving when the drag gesture ends |
| dragTransition | InertiaOptions | { bounceStiffness: 200, bounceDamping: 300 } | Specifies the spring physics for the drag end animation |
| dragPropagation | boolean | true | If true, allows dragging events to propagate to parent drag gestures |
| selectedOnTop | boolean | true | If true, brings the dragged element to the front |
| className | string | - | Additional CSS classes for the container |
