nested grid resizing fix

fix #1604

Author: adumesny

demo/nested.html

@@ -7,7 +7,7 @@
   <title>Nested grids demo (ES6)</title>
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
-  <script src="../dist/gridstack-jq.js"></script>
+  <script src="../dist/gridstack-h5.js"></script>
   <style type="text/css">
     .grid-stack .grid-stack {
       background: rgba(255, 255, 255, 0.3);
@@ -21,7 +21,7 @@
   <div class="container-fluid">
     <h1>Nested grids demo</h1>
     <p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
-    <p>Note: initial v3 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>
+    <p>Note: initial v3 HTML5 release doesn't support 'dragOut:false' constrain so use jq version if you need that.</p>
     <a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
     <a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
     <br><br>

doc/CHANGES.md

@@ -55,6 +55,7 @@ Change log
 - new grid option `cellHeightThrottle` (100ms) to control throttle of auto sizing triggers
 - fix [1600](https://github.com/gridstack/gridstack.js/issues/1600) height too small with `cellHeight:auto` loading in 1 column. Now detect we load at 1 column and size accordingly (default 'auto' could make big 700x700 cells, so explicit px might still be wanted)
 - fix [1538](https://github.com/gridstack/gridstack.js/issues/1538) loading nested into small size and sizing back up
+- fix [1604](https://github.com/gridstack/gridstack.js/issues/1604) nested grid resizing fix
 
 ## 3.2.0 (2021-1-25)
 

src/h5/dd-resizable-handle.ts

@@ -64,6 +64,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 */
   private _mouseDown(e: MouseEvent): void {
+    e.preventDefault();
     this.mouseDownEvent = e;
     document.addEventListener('mousemove', this._mouseMove, true); // capture, not bubble
     document.addEventListener('mouseup', this._mouseUp);