working on draggable api

src/components/utils/draggable.js

@@ -1,27 +1,32 @@
-import React from "react"
-import {useDraggable} from "@dnd-kit/core"
-import { CSS } from "@dnd-kit/utilities"
 
-function Draggable(props) {
-    const {attributes, listeners, setNodeRef, transform} = useDraggable({
-      id: props.id,
-      data: {title: props.children}
-    })
-    const style = transform ? {
-      transform: CSS.Translate.toString(transform),
-    } : undefined
-  
-    
+
+const DraggableWrapper = (props) => {
+
+
+    const handleDragStart = () => {
+        console.log("Drag start")
+    }
+
+    const handleDragOver = () => {
+        // console.log("Drag over")
+    }
+
+    const handleDragEnd = (e) => {
+        // console.log("Drag end: ", e, e.target.closest('div'))
+
+    }
+
     return (
-      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
-              ref={setNodeRef} 
-              style={style} 
-              {...listeners} 
-              {...attributes}>
-        {props.children}
-      </button>
+        <div className={`${props.className}`} draggable 
+                onDragStart={handleDragStart} 
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}
+                >
+            {props.children}
+        </div>
     )
+
 }
 
 
-export default Draggable
+export default DraggableWrapper