added dropstyle to widgets, shows dotted lines

src/components/cards.js

@@ -32,7 +32,7 @@ export function DraggableWidgetCard({ name, img, url, innerRef}){
         // <Draggable className="tw-cursor-pointer" id={name}>
             <DraggableWrapper data-container={"sidebar"} dragElementType={"widget"} className="tw-cursor-pointer tw-w-fit tw-h-fit">
                 
-                <div ref={innerRef} className="tw-select-none  tw-h-[240px] tw-w-[280px] tw-flex tw-flex-col 
+                <div ref={innerRef} className="tw-select-none  tw-h-[200px] tw-w-[230px] 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] ">

src/components/draggable/draggableContext.js

@@ -7,6 +7,7 @@ export const useDragContext = () => useContext(DragContext)
 // Provider component to wrap around parts of your app that need drag-and-drop functionality
 export const DragProvider = ({ children }) => {
     const [draggedElement, setDraggedElement] = useState(null)
+    const [overElement, setOverElement] = useState(null) // the element the dragged items is over
 
     const onDragStart = (element) => {
         setDraggedElement(element)
@@ -17,7 +18,7 @@ export const DragProvider = ({ children }) => {
     }
 
     return (
-        <DragContext.Provider value={{ draggedElement, onDragStart, onDragEnd }}>
+        <DragContext.Provider value={{ draggedElement, overElement, setOverElement, onDragStart, onDragEnd }}>
             {children}
         </DragContext.Provider>
     )

src/components/draggable/droppable.js

@@ -5,7 +5,7 @@ import { useDragContext } from "./draggableContext"
 const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) => {
 
 
-    const { draggedElement } = useDragContext()
+    const { draggedElement, overElement, setOverElement } = useDragContext()
 
     const [showDroppable, setShowDroppable] = useState({
                                                             show: false, 
@@ -17,6 +17,10 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
         
         const dragElementType = draggedElement.getAttribute("data-draggable-type")
 
+        // console.log("Current target: ", e.currentTarget)
+
+        setOverElement(e.currentTarget)
+
         if (droppableTags.length === 0 || droppableTags.includes(dragElementType)){
             setShowDroppable({
                 allow: true, 
@@ -41,6 +45,7 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
     }
 
     const handleDropEvent = (e) => {
+        e.stopPropagation()
 
         setShowDroppable({
             allow: false, 
@@ -69,15 +74,17 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
                 onDragEnter={handleDragEnter}
                 onDragLeave={handleDragLeave}
                 >
+            
+            {props.children}
+
             {
                 showDroppable.show && 
                     <div className={`${showDroppable.allow ? "tw-border-green-600" : "tw-border-red-600"} 
                                     tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[2]
-                                    tw-border-2 tw-border-dashed  tw-rounded-lg
+                                    tw-border-2 tw-border-dashed  tw-rounded-lg tw-pointer-events-none
                                     `}>
                     </div>
             }
-            {props.children}
             
         </div>
     )