diff --git a/demo/two_vertical.html b/demo/two_vertical.html index 9cad829e7..532fe9b42 100644 --- a/demo/two_vertical.html +++ b/demo/two_vertical.html @@ -28,7 +28,7 @@

Two vertical grids demo - with maxRow

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'}]); diff --git a/doc/CHANGES.md b/doc/CHANGES.md index ca5d5235d..fc0a55236 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -54,6 +54,8 @@ Change log ## 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 diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 2683a529d..53e5f30f9 100644 --- a/src/gridstack-dd.ts +++ b/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 diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index cfbefb106..858541f99 100644 --- a/src/gridstack-engine.ts +++ b/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 */ diff --git a/src/types.ts b/src/types.ts index d06679376..7e41c9929 100644 --- a/src/types.ts +++ b/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) */