added dropstyle to widgets, shows dotted lines

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>
     )