Fix drag-n-drop with FluentUI (#416)

* Fix drag-n-drop for FluentUI
ukrbublik · Jun 15, 2021 · 2fab00c · 2fab00c
1 parent b62bc03
commit 2fab00c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Changelog
 - 4.0.4
+  - Fixed issue #349 with drag-n-drop and office-ui-fabric-react
   - Fixed issue #413 with func arg with 1 value source which is not value
 - 4.0.3
   - Fixed issue #386 with import select field from JsonLogic (reason: bug with func/field widget in getWidgetForFieldOp)

diff --git a/modules/components/containers/SortableContainer.jsx b/modules/components/containers/SortableContainer.jsx
@@ -139,6 +139,10 @@ export default (Builder, CanMoveFn = null) => {
       }
     }
 
+    _getEventTarget = (e, dragStart) => {
+      return e && e.__mocked_window || document.body || window;
+    }
+
     onDragStart = (id, dom, e) => {
       let treeEl = dom.closest(".query-builder");
       document.body.classList.add("qb-dragging");
@@ -183,7 +187,8 @@ export default (Builder, CanMoveFn = null) => {
         clientY: e.clientY,
       };
 
-      const target = e.__mocked_window || window;
+      const target = this._getEventTarget(e, dragStart);
+      this.eventTarget = target;
       target.addEventListener("mousemove", this.onDrag);
       target.addEventListener("mouseup", this.onDragEnd);
 
@@ -263,10 +268,11 @@ export default (Builder, CanMoveFn = null) => {
       document.body.classList.remove("qb-dragging");
       this._cacheEls = {};
 
-      window.removeEventListener("mousemove", this.onDrag);
-      window.removeEventListener("mouseup", this.onDragEnd);
+      const target = this.eventTarget || this._getEventTarget();
+      target.removeEventListener("mousemove", this.onDrag);
+      target.removeEventListener("mouseup", this.onDragEnd);
     }
-
+    
 
     handleDrag (dragInfo, e, canMoveFn) {
       const canMoveBeforeAfterGroup = true;