collision: final 2 grids with maxRow

* fix #1687
* willItFit() will now save the location we can be added to, which is used upon inserting.

Author: adumesny

demo/two_vertical.html

@@ -28,7 +28,7 @@ <h1>Two vertical grids demo - with maxRow</h1>
     GridStack.init(opts, document.getElementById('grid1'))
       .load([{x:0, y:0, content: '0'}, {x:1, y:0, content: '1'}]);
     GridStack.init(opts, document.getElementById('grid2'))
-      .load([{x:0, y:0, content: '2'}, {x:2, y:0, content: '3'}]);
+      .load([{x:0, y:0, content: '2'}, {x:1, y:0, content: '3'}]);
   </script>
 </body>
 </html>

doc/CHANGES.md

@@ -54,6 +54,8 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 4.0.3-dev
 
+- fix [#1687](https://github.com/gridstack/gridstack.js/issues/1687) more fix for drag between 2 grids with `row / maxRow` broken in 4.x
+
 ## 4.0.3 (2021-3-28)
 
 - fix [#1693](https://github.com/gridstack/gridstack.js/issues/1693) `load` after `init()` broken in 4.x

src/gridstack-dd.ts

@@ -103,6 +103,11 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
           GridStackDD.get().off(el, 'drag'); // stop calling us
           return; // full grid or can't grow
         }
+        if (node._willFitPos) {
+          // use the auto position instead #1687
+          Utils.copyPos(node, node._willFitPos);
+          delete node._willFitPos;
+        }
       }
 
       // re-use the existing node dragging method

src/gridstack-engine.ts

@@ -540,7 +540,7 @@ export class GridStackEngine {
     if (!canMove) return false;
 
     // if clone was able to move, copy those mods over to us now instead of caller trying to do this all over!
-    // Note: we can't use the list directly as elements and other parts point to actual node struct, so copy content
+    // Note: we can't use the list directly as elements and other parts point to actual node, so copy content
     clone.nodes.filter(n => n._dirty).forEach(c => {
       let n = this.nodes.find(a => a._id === c._id);
       if (!n) return;
@@ -553,6 +553,7 @@ export class GridStackEngine {
 
   /** return true if can fit in grid height constrain only (always true if no maxRow) */
   public willItFit(node: GridStackNode): boolean {
+    delete node._willFitPos;
     if (!this.maxRow) return true;
     // create a clone with NO maxRow and check if still within size
     let clone = new GridStackEngine({
@@ -564,7 +565,11 @@ export class GridStackEngine {
     this.cleanupNode(n);
     delete n.el; delete n._id; delete n.content; delete n.grid;
     clone.addNode(n);
-    return clone.getRow() <= this.maxRow;
+    if (clone.getRow() <= this.maxRow) {
+      node._willFitPos = Utils.copyPos({}, n);
+      return true;
+    }
+    return false;
   }
 
   /** true if x,y or w,h are different after clamping to min/max */

src/types.ts

@@ -342,6 +342,8 @@ export interface GridStackNode extends GridStackWidget {
   _lastUiPosition?: Position;
   /** @internal set on the item being dragged/resized remember the last positions we've tried (but failed) so we don't try again during drag/resize */
   _lastTried?: GridStackPosition;
+  /** @internal position willItFit() will use to position the item */
+  _willFitPos?: GridStackPosition;
   /** @internal last drag Y pixel position used to incrementally update V scroll bar */
   _prevYPix?: number;
   /** @internal true if we've remove the item from ourself (dragging out) but might revert it back (release on nothing -> goes back) */