Drag Elements

1"use client"
2 
3import React, { useEffect, useRef, useState } from "react"
4import { InertiaOptions, motion } from "motion/react"
5 
6type DragElementsProps = {
7  children: React.ReactNode
8  dragElastic?:
9    | number
10    | { top?: number; left?: number; right?: number; bottom?: number }
11    | boolean
12  dragConstraints?:
13    | { top?: number; left?: number; right?: number; bottom?: number }
14    | React.RefObject<Element | null>
15  dragMomentum?: boolean
16  dragTransition?: InertiaOptions
17  dragPropagation?: boolean
18  selectedOnTop?: boolean
19  className?: string
20}
21 
22const DragElements: React.FC<DragElementsProps> = ({
23  children,
24  dragElastic = 0.5,
25  dragConstraints,
26  dragMomentum = true,
27  dragTransition = { bounceStiffness: 200, bounceDamping: 300 },
28  dragPropagation = true,
29  selectedOnTop = true,
30  className,
31}) => {
32  const constraintsRef = useRef<HTMLDivElement>(null)
33  const [zIndices, setZIndices] = useState<number[]>([])
34 
35  const [isDragging, setIsDragging] = useState(false)
36 
37  useEffect(() => {
38    setZIndices(
39      Array.from({ length: React.Children.count(children) }, (_, i) => i)
40    )
41  }, [children])
42 
43  const bringToFront = (index: number) => {
44    if (selectedOnTop) {
45      setZIndices((prevIndices) => {
46        const newIndices = [...prevIndices]
47        const currentIndex = newIndices.indexOf(index)
48        newIndices.splice(currentIndex, 1)
49        newIndices.push(index)
50        return newIndices
51      })
52    }
53  }
54 
55  return (
56    <div ref={constraintsRef} className={`relative w-full h-full ${className}`}>
57      {React.Children.map(children, (child, index) => (
58        <motion.div
59          key={index}
60          drag
61          dragElastic={dragElastic}
62          dragConstraints={dragConstraints || constraintsRef}
63          dragMomentum={dragMomentum}
64          dragTransition={dragTransition}
65          dragPropagation={dragPropagation}
66          style={{
67            zIndex: zIndices.indexOf(index),
68 
69            cursor: isDragging ? "grabbing" : "grab",
70          }}
71          onDragStart={() => {
72            bringToFront(index)
73            setIsDragging(true)
74          }}
75          onDragEnd={() => setIsDragging(false)}
76          whileDrag={{ cursor: "grabbing" }}
77          className={"absolute"}
78        >
79          {child}
80        </motion.div>
81      ))}
82    </div>
83  )
84}
85 
86export default DragElements