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