Merge pull request #3376 from adumesny/master

disable pointer events on iframes

Author: adumesny

doc/CHANGES.md

@@ -149,6 +149,7 @@ Change log
 ## 13.2.0-dev (TBD)
 * feat: [#2781](https://github.com/gridstack/gridstack.js/issues/3177) [#2781](https://github.com/gridstack/gridstack.js/issues/3177) mobile: pause to drag/reszie vs scroll behavior
 * fix: [#3374](https://github.com/gridstack/gridstack.js/issues/3374) use `moveBefore()` (when supported) instead of `appendChild()` in `_sortDom()` so reordering doesn't reload iframes / lose element state
+* fix: [#934](https://github.com/gridstack/gridstack.js/issues/934) disable pointer events on iframes while dragging/resizing so fast mouse moves aren't swallowed by the iframe's own document
 
 ## 13.2.0 (2026-08-19)
 * feat: [#701](https://github.com/gridstack/gridstack.js/issues/701) removed printMode as we support much better printing now that doesn't compromise.

src/dd-draggable.ts

@@ -247,6 +247,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
        * don't start unless we've moved at least 3 pixels
        */
       this.dragging = true;
+      Utils.pauseIframePointerEvents(true);
       this.el.classList.remove('ui-draggable-armed');
       DDManager.dragElement = this;
       // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
@@ -287,6 +288,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     }
     if (this.dragging) {
       delete this.dragging;
+      Utils.pauseIframePointerEvents(false);
       delete (this.el.gridstackNode as GridStackNodeRotate)?._origRotate;
       document.removeEventListener('keydown', this._keyEvent);
 

src/dd-resizable.ts

@@ -177,6 +177,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     this.scrollY = this.scrollEl.scrollTop;
     this.scrolled = 0;
     this.startEvent = event;
+    Utils.pauseIframePointerEvents(true);
     this._setupHelper();
     this._applyChange();
     const ev = Utils.initEvent<MouseEvent>(event, { type: 'resizestart', target: this.el });
@@ -207,6 +208,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   protected _resizeStop(event: MouseEvent): DDResizable {
     const ev = Utils.initEvent<MouseEvent>(event, { type: 'resizestop', target: this.el });
+    Utils.pauseIframePointerEvents(false);
     // Remove style attr now, so the stop handler can rebuild style attrs
     this._cleanHelper();
     if (this.option.stop) {

src/utils.ts

@@ -559,6 +559,17 @@ export class Utils {
     }
   }
 
+  /**
+   * disable/re-enable pointer events on all iframes on the page while dragging/resizing, otherwise
+   * fast mouse moves over an iframe get swallowed by its own document instead of reaching ours,
+   * which stalls the drag/resize. See https://github.com/gridstack/gridstack.js/issues/934
+   */
+  static pauseIframePointerEvents(pause: boolean): void {
+    document.querySelectorAll('iframe').forEach(iframe => {
+      (iframe as HTMLIFrameElement).style.pointerEvents = pause ? 'none' : '';
+    });
+  }
+
   /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
   static clone<T>(obj: T): T {
     if (obj === null || obj === undefined || typeof(obj) !== 'object') {