([])
const [isDragging, setIsDragging] = useState(false)
useEffect(() => {
setZIndices(
Array.from({ length: React.Children.count(children) }, (_, i) => i)
)
}, [children])
const bringToFront = (index: number) => {
if (selectedOnTop) {
setZIndices((prevIndices) => {
const newIndices = [...prevIndices]
const currentIndex = newIndices.indexOf(index)
newIndices.splice(currentIndex, 1)
newIndices.push(index)
return newIndices
})
}
}
return (
{React.Children.map(children, (child, index) => (
{
bringToFront(index)
setIsDragging(true)
}}
onDragEnd={() => setIsDragging(false)}
whileDrag={{ cursor: "grabbing" }}
className={"absolute"}
>
{child}
))}
)
}
export default DragElements
```
## 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](https://motion.dev/docs/react-gestures#drag) 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
Example:
```tsx
import React from "react"
import DragElements from "@/components/fancy/blocks/drag-elements"
const DragElementsDemo: React.FC = () => {
return (
super fun ✿
funky time! ✴
awesome ✺
)
}
export default DragElementsDemo
```
## 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` | - | 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 |
---
*This documentation is also available in [interactive format](https://fancycomponents.dev/docs/components/components/blocks/drag-elements).*