Merge pull request #2610 from adumesny/master

using passive:true for mousemove events

Author: adumesny

doc/CHANGES.md

@@ -114,6 +114,7 @@ Change log
 * fix: [#2576](https://github.com/gridstack/gridstack.js/issues/2576) column('none') now ignores layouts
 * fix: [#2560](https://github.com/gridstack/gridstack.js/issues/2560) nested grid fix (enter can call leave which can call enter again) - Thank you [v1talii-dev](https://github.com/v1talii-dev)
 * fix: [#2596](https://github.com/gridstack/gridstack.js/pull/2596) prevent SSR crash
+* fix: [#2610](https://github.com/gridstack/gridstack.js/pull/2610) using passive:true for mousemove events
 * demo: nested.htm now has nested create and drag&drop example - Thank you [fredericrous](https://github.com/fredericrous)
 
 ## 10.0.1 (2023-12-10)

src/dd-draggable.ts

@@ -158,7 +158,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     delete DDManager.dragElement;
     delete DDManager.dropElement;
     // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
-    document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble
+    document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true}); // true=capture, not bubble
     document.addEventListener('mouseup', this._mouseUp, true);
     if (isTouch) {
       this.dragEl.addEventListener('touchmove', touchmove);
@@ -226,7 +226,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
       }
       this.triggerEvent('dragstart', ev);
     }
-    e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around
+    // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around
     return true;
   }
 

src/dd-resizable-handle.ts

@@ -74,7 +74,7 @@ export class DDResizableHandle {
   /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
   protected _mouseDown(e: MouseEvent): void {
     this.mouseDownEvent = e;
-    document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble
+    document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true}); // capture, not bubble
     document.addEventListener('mouseup', this._mouseUp, true);
     if (isTouch) {
       this.el.addEventListener('touchmove', touchmove);
@@ -96,7 +96,7 @@ export class DDResizableHandle {
       this._triggerEvent('move', e);
     }
     e.stopPropagation();
-    e.preventDefault();
+    // e.preventDefault(); passive = true
   }
 
   /** @internal */