fixed widget dragging inside the canvas

src/components/draggable/draggable.js

@@ -7,7 +7,7 @@ import { useDragContext } from "./draggableContext"
  * @param {string} - dragElementType - this will set the data-draggable-type which can be accessed on droppable to check if its allowed or not
  * @returns 
  */
-const DraggableWrapper = memo(({dragElementType, className, children}) => {
+const DraggableWrapper = memo(({dragElementType, className, children, ...props}) => {
 
     const { onDragStart, onDragEnd } = useDragContext()
 
@@ -40,6 +40,7 @@ const DraggableWrapper = memo(({dragElementType, className, children}) => {
                 onDragStart={handleDragStart} 
                 onDragEnd={handleDragEnd}
                 ref={draggableRef}
+                {...props}
                 >
             {children}
         </div>

src/components/draggable/droppable.js

@@ -14,7 +14,6 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
     
 
     const handleDragEnter = (e) => {
-        console.log("Drag Enter",  draggedElement)
         
         const dragElementType = draggedElement.getAttribute("data-draggable-type")
 
@@ -42,7 +41,6 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
     }
 
     const handleDropEvent = (e) => {
-        console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer)
 
         setShowDroppable({
             allow: false, 
@@ -50,7 +48,7 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
         })
 
         if(onDrop){
-            onDrop(e)
+            onDrop(e, draggedElement)
         }
     }