working on draggable api

src/components/cards.js

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useRef } from "react"
-import Draggable from "./utils/draggable"
+import Draggable from "./utils/draggableDnd"
 
 import { FileImageOutlined, GithubOutlined, GitlabOutlined, LinkOutlined,
             AudioOutlined, VideoCameraOutlined,
             FileTextOutlined} from "@ant-design/icons"
+import DraggableWrapper from "./utils/draggable"
 
 
 export function DraggableWidgetCard({ name, img, url, innerRef}){
@@ -28,21 +29,25 @@ export function DraggableWidgetCard({ name, img, url, innerRef}){
 
 
     return (
-        <Draggable className="tw-cursor-pointer" id={name}>
-            <div ref={innerRef} className="tw-select-none tw-h-[240px] tw-w-[280px] tw-flex tw-flex-col tw-rounded-md tw-overflow-hidden 
-                            tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px] tw-border-[#888] ">
-                <div className="tw-h-[200px] tw-w-full tw-overflow-hidden">
-                    <img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
-                </div>
-                <span className="tw-text-xl">{name}</span>
-                <div className="tw-flex tw-text-lg  tw-justify-between tw-px-4">
+        // <Draggable className="tw-cursor-pointer" id={name}>
+            <DraggableWrapper className="tw-cursor-pointer tw-w-fit tw-h-fit">
+                <div ref={innerRef} className="tw-select-none tw-pointer-events-none tw-h-[240px] tw-w-[280px] tw-flex tw-flex-col 
+                                                tw-rounded-md tw-overflow-hidden 
+                                                tw-gap-2 tw-text-gray-600 tw-bg-[#ffffff44] tw-border-solid tw-border-[1px]
+                                                tw-border-[#888] ">
+                    <div className="tw-h-[200px] tw-w-full tw-overflow-hidden">
+                        <img src={img} alt={name} className="tw-object-contain tw-h-full tw-w-full tw-select-none" />
+                    </div>
+                    <span className="tw-text-xl tw-text-center">{name}</span>
+                    <div className="tw-flex tw-text-lg tw-place tw-px-4">
 
-                    <a href={url} className="tw-text-black" target="_blank" rel="noopener noreferrer">
-                        {urlIcon}
-                    </a>
+                        <a href={url} className="tw-text-black" target="_blank" rel="noopener noreferrer">
+                            {urlIcon}
+                        </a>
+                    </div>
                 </div>
-            </div>
-        </Draggable>
+            </DraggableWrapper>
+        // </Draggable> 
     )
 
 }

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

src/components/utils/draggableDnd.js

@@ -0,0 +1,27 @@
+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
+  
+    
+    return (
+      <button className={`tw-bg-transparent tw-outline-none tw-border-none ${props.className}`} 
+              ref={setNodeRef} 
+              style={style} 
+              {...listeners} 
+              {...attributes}>
+        {props.children}
+      </button>
+    )
+}
+
+
+export default Draggable

src/components/utils/droppable.js

@@ -1,20 +1,68 @@
-import React from 'react'
-import {useDroppable} from '@dnd-kit/core'
+import { useState } from "react"
+
+
+const DroppableWrapper = ({onDrop, ...props}) => {
+
+
+    const [showDroppable, setShowDroppable] = useState({
+                                                            show: false, 
+                                                            allow: false
+                                                        })
+
+    const handleDragEnter = () => {
+        console.log("Drag start")
+        setShowDroppable({
+            allow: true, 
+            show: true
+        })
+    }
+
+    const handleDragOver = (e) => {
+        // console.log("Drag over: ", e)
+        e.preventDefault()
+    }
+
+    const handleDropEvent = (e) => {
+
+        setShowDroppable({
+            allow: false, 
+            show: false
+        })
+
+        if(onDrop){
+            onDrop(e)
+        }
+    }
+
+
+    const handleDragLeave = (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setShowDroppable({
+                allow: false, 
+                show: false
+            })
+        }
+    }
+
+    return (
+        <div className={`${props.className}`}
+                onDragOver={handleDragOver}
+                onDrop={handleDropEvent}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                >
+            {/* {
+                showDroppable.show && 
+                <div className={`${showDroppable.allow ? "tw-bg-[#b9f18e77]" : "tw-bg-[#ff7a7a6d]"} 
+                                tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[2]`}>
+                </div>
+            } */}
+            {props.children}
+            
+        </div>
+    )
 
-function Droppable(props) {
-  const {isOver, setNodeRef} = useDroppable({
-    id: props.id,
-  })
-  const style = {
-    backgroundColor: isOver ? 'green' : '',
-  }
-  
-  
-  return (
-    <div ref={setNodeRef} style={style} className={props.className || ''}>
-      {props.children}
-    </div>
-  )
 }
 
-export default Droppable
+
+export default DroppableWrapper

src/components/utils/droppableDnd.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {useDroppable} from '@dnd-kit/core'
+
+function Droppable(props) {
+  const {isOver, setNodeRef} = useDroppable({
+    id: props.id,
+  })
+  const style = {
+    backgroundColor: isOver ? 'green' : '',
+  }
+  
+  
+  return (
+    <div ref={setNodeRef} style={style} className={props.className || ''}>
+      {props.children}
+    </div>
+  )
+}
+
+export default Droppable

src/components/utils/panzoom.js

@@ -1,4 +1,4 @@
-// This is only for testing purpose, not really meant to be used
+//NOTE: This is only for testing purpose, not really meant to be used
 import './polyfills'
 
 import {