Fixed drag drop event handling

2 files changed, 9 insertions, 8 deletions

diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index 7a8362471..89d994089 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -45,7 +45,7 @@ export namespace DragManager {
     }
 
     export interface DropHandlers {
-        drop: (e: DropEvent) => void;
+        drop: (e:Event, de: DropEvent) => void;
     }
 
     export function MakeDraggable(element: HTMLElement, options: DragOptions): DragDropDisposer {
@@ -85,7 +85,7 @@ export namespace DragManager {
         element.dataset["canDrop"] = "true";
         const handler = (e: Event) => {
             const ce = e as CustomEvent<DropEvent>;
-            options.handlers.drop(ce.detail);
+            options.handlers.drop(e, ce.detail);
         };
         element.addEventListener("dashOnDrop", handler);
         return () => {
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 53c5def52..8215e27ac 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -43,20 +43,21 @@ export class CollectionFreeFormView extends React.Component<IProps> {
             const ele = this._ref.current;
             DragManager.MakeDropTarget(this._ref.current, {
                 handlers: {
-                    drop: (e: DragManager.DropEvent) => {
-                        const doc = e.data["document"];
-                        const xOffset = e.data["xOffset"] as number || 0;
-                        const yOffset = e.data["yOffset"] as number || 0;
+                    drop: (e:Event, de: DragManager.DropEvent) => {
+                        const doc = de.data["document"];
+                        const xOffset = de.data["xOffset"] as number || 0;
+                        const yOffset = de.data["yOffset"] as number || 0;
                         if (doc instanceof DocumentView) {
                             const { scale, translateX, translateY } = Utils.GetScreenTransform(ele.children[0] as HTMLElement);
                             console.log(`${scale} ${translateX} ${translateY}`)
-                            const screenX = e.x - xOffset;
-                            const screenY = e.y - yOffset;
+                            const screenX = de.x - xOffset;
+                            const screenY = de.y - yOffset;
                             const docX = (screenX - translateX) / scale;
                             const docY = (screenY - translateY) / scale;
                             doc.x = docX;
                             doc.y = docY;
                         }
+                        e.stopPropagation();
                     }
                 }
             });