insert extra rows, insert below

fix #219
**fixing another 6 years old request**
* we now automatically insert extra rows
when dragging an item at the bottom below others to make it easier to insert below.
* added _extraDragRow to grids driven by dragged item

Author: adumesny

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 [#219](https://github.com/gridstack/gridstack.js/issues/219) **fixing another 6 years old request** we now automatically insert extra rows
+when dragging an item at the bottom below others to make it easier to insert below.
 - 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)

src/gridstack-dd.ts

@@ -420,6 +420,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
         }
       }
 
+      this._extraDragRow = 0;
       this._updateContainerHeight();
       this._triggerChangeEvent();
 
@@ -537,6 +538,19 @@ GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Eve
     let top = ui.position.top + (ui.position.top > node._lastUiPosition.top  ? -this.opts.marginBottom : this.opts.marginTop);
     p.x = Math.round(left / cellWidth);
     p.y = Math.round(top / cellHeight);
+
+    // if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others
+    let prev = this._extraDragRow;
+    if (this.engine.collide(node, p)) {
+      let row = this.getRow();
+      let extra = Math.max(0, (p.y + node.h) - row);
+      if (this.opts.maxRow && row + extra > this.opts.maxRow) {
+        extra = Math.max(0, this.opts.maxRow - row);
+      }
+      this._extraDragRow = extra;
+    } else this._extraDragRow = 0;
+    if (this._extraDragRow !== prev) this._updateContainerHeight();
+
     if (node.x === p.x && node.y === p.y) return; // skip same
     // DON'T skip one we tried as we might have failed because of coverage <50% before
     // if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return;
@@ -570,6 +584,7 @@ GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Eve
     this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft);
     delete node._skipDown;
     if (resizing && node.subGrid) { (node.subGrid as GridStack).onParentResize(); }
+    this._extraDragRow = 0;
     this._updateContainerHeight();
 
     let target = event.target as GridItemHTMLElement;

src/gridstack.ts

@@ -228,6 +228,8 @@ export class GridStack {
   private _cellHeightThrottle: () => void;
   /** @internal true when loading items to insert first rather than append */
   private _insertNotAppend: boolean;
+  /** @internal extra row added when dragging at the bottom of the grid */
+  private _extraDragRow = 0;
 
   /**
    * Construct a grid item from the given element and options
@@ -1200,7 +1202,7 @@ export class GridStack {
   /** @internal */
   private _updateContainerHeight(): GridStack {
     if (!this.engine || this.engine.batchMode) return this;
-    let row = this.getRow(); // checks for minRow already
+    let row = this.getRow() + this._extraDragRow; // checks for minRow already
     // check for css min height
     let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
     if (cssMinHeight > 0) {