gridstack 11.5.0 → 12.0.0

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 11.5.0
+ * GridStack 12.0.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2024  Alain Dumesny
@@ -156,9 +156,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         opts = utils_1.Utils.defaults(opts, defaults);
         this._initMargin(); // part of settings defaults...
-        // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
+        // Now check if we're loading into !12 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
         this.checkDynamicColumn();
-        this.el.classList.add('gs-' + opts.column);
+        this._updateColumnVar(opts);
         if (opts.rtl === 'auto') {
             opts.rtl = (el.style.direction === 'rtl');
         }
@@ -177,7 +177,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this._isAutoCellHeight = (opts.cellHeight === 'auto');
         if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
             // make the cell content square initially (will use resize/column event to keep it square)
-            this.cellHeight(undefined, false);
+            this.cellHeight(undefined);
         }
         else {
             // append unit if any are set
@@ -185,14 +185,14 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
                 delete opts.cellHeightUnit;
             }
-            this.cellHeight(opts.cellHeight, false);
+            var val = opts.cellHeight;
+            delete opts.cellHeight; // force initial cellHeight() call to set the value
+            this.cellHeight(val);
         }
         // see if we need to adjust auto-hide
         if (opts.alwaysShowResizeHandle === 'mobile') {
             opts.alwaysShowResizeHandle = dd_touch_1.isTouch;
         }
-        this._styleSheetClass = 'gs-id-' + gridstack_engine_1.GridStackEngine._idSeq++;
-        this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
         var engineClass = opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
         this.engine = new engineClass({
@@ -200,8 +200,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             float: opts.float,
             maxRow: opts.maxRow,
             onChange: function (cbNodes) {
-                var maxH = 0;
-                _this.engine.nodes.forEach(function (n) { maxH = Math.max(maxH, n.y + n.h); });
                 cbNodes.forEach(function (n) {
                     var el = n.el;
                     if (!el)
@@ -215,11 +213,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                         _this._writePosAttr(el, n);
                     }
                 });
-                _this._updateStyles(false, maxH); // false = don't recreate, just append if need be
+                _this._updateContainerHeight();
             }
         });
-        // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
-        this._updateStyles(false, 0);
         if (opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
             this.engine._loading = true; // loading collision check
@@ -234,7 +230,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             if (children.length)
                 this.load(children); // don't load empty
         }
-        // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
         this.setAnimation();
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
@@ -363,6 +358,12 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    GridStack.prototype._updateColumnVar = function (opts) {
+        if (opts === void 0) { opts = this.opts; }
+        this.el.classList.add('gs-' + opts.column);
+        if (typeof opts.column === 'number')
+            this.el.style.setProperty('--gs-column-width', "".concat(100 / opts.column, "%"));
+    };
     /**
      * add a new widget and returns it.
      *
@@ -652,8 +653,18 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         items.forEach(function (n) { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w); });
         if (maxColumn > this.engine.defaultColumn)
             this.engine.defaultColumn = maxColumn;
-        if (maxColumn > column)
-            this.engine.cacheLayout(items, maxColumn, true);
+        if (maxColumn > column) {
+            // if we're loading (from empty) into a smaller column, check for special responsive layout
+            if (this.engine.nodes.length === 0 && this.responseLayout) {
+                this.engine.nodes = items;
+                this.engine.columnChanged(maxColumn, column, this.responseLayout);
+                items = this.engine.nodes;
+                this.engine.nodes = [];
+                delete this.responseLayout;
+            }
+            else
+                this.engine.cacheLayout(items, maxColumn, true);
+        }
         // if given a different callback, temporally set it as global option so creating will use it
         var prevCB = GridStack.addRemoveCB;
         if (typeof (addRemove) === 'function')
@@ -789,17 +800,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      *
      * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
      * if pass 0 the CSS will be generated by the application instead.
-     * @param update (Optional) if false, styles will not be updated
      *
      * @example
      * grid.cellHeight(100); // same as 100px
      * grid.cellHeight('70px');
      * grid.cellHeight(grid.cellWidth() * 1.2);
      */
-    GridStack.prototype.cellHeight = function (val, update) {
-        if (update === void 0) { update = true; }
+    GridStack.prototype.cellHeight = function (val) {
         // if not called internally, check if we're changing mode
-        if (update && val !== undefined) {
+        if (val !== undefined) {
             if (this._isAutoCellHeight !== (val === 'auto')) {
                 this._isAutoCellHeight = (val === 'auto');
                 this._updateResizeEvent();
@@ -820,10 +829,10 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         }
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
+        // finally update var and container
+        this.el.style.setProperty('--gs-cell-height', "".concat(this.opts.cellHeight).concat(this.opts.cellHeightUnit));
+        this._updateContainerHeight();
         this.resizeToContentCheck();
-        if (update) {
-            this._updateStyles(true); // true = force re-create for current # of rows
-        }
         return this;
     };
     /** Gets current cell width. */
@@ -882,8 +891,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
      * as well as cache the original layout so you can revert back to previous positions without loss.
-     * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
-     * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
      * @param column - Integer > 0 (default 12).
      * @param layout specify the type of re-layout that will happen (position, size, etc...).
      * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
@@ -894,15 +901,16 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             return this;
         var oldColumn = this.getColumn();
         this.opts.column = column;
-        if (!this.engine)
-            return this; // called in constructor, noting else to do
+        if (!this.engine) {
+            // called in constructor, noting else to do but remember that breakpoint layout
+            this.responseLayout = layout;
+            return this;
+        }
         this.engine.column = column;
         this.el.classList.remove('gs-' + oldColumn);
-        this.el.classList.add('gs-' + column);
-        // update the items now, checking if we have a custom children layout
-        /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
-        if (newChildren) this.load(newChildren);
-        else*/ this.engine.columnChanged(oldColumn, column, layout);
+        this._updateColumnVar();
+        // update the items now
+        this.engine.columnChanged(oldColumn, column, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
         this.resizeToContentCheck(true); // wait for width resizing
@@ -929,7 +937,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).
      */
     GridStack.prototype.destroy = function (removeDOM) {
-        var _a, _b;
+        var _a;
         if (removeDOM === void 0) { removeDOM = true; }
         if (!this.el)
             return; // prevent multiple calls
@@ -939,17 +947,16 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.setAnimation(false);
         if (!removeDOM) {
             this.removeAll(removeDOM);
-            this.el.classList.remove(this._styleSheetClass);
             this.el.removeAttribute('gs-current-row');
         }
         else {
             this.el.parentNode.removeChild(this.el);
         }
-        this._removeStylesheet();
-        (_a = this.parentGridNode) === null || _a === void 0 ? true : delete _a.subGrid;
+        if (this.parentGridNode)
+            delete this.parentGridNode.subGrid;
         delete this.parentGridNode;
         delete this.opts;
-        (_b = this._placeholder) === null || _b === void 0 ? true : delete _b.gridstackNode;
+        (_a = this._placeholder) === null || _a === void 0 ? true : delete _a.gridstackNode;
         delete this._placeholder;
         delete this.engine;
         delete this.el.gridstack; // remove circular dependency that would prevent a freeing
@@ -1029,8 +1036,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      */
     GridStack.prototype.makeWidget = function (els, options) {
         var el = GridStack.getElement(els);
-        if (!el)
-            return;
+        if (!el || el.gridstackNode)
+            return el;
         if (!el.parentElement)
             this.el.appendChild(el);
         this._prepareElement(el, true, options);
@@ -1236,7 +1243,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (o.animate !== undefined)
             this.setAnimation();
         if (o.cellHeight) {
-            this.cellHeight(o.cellHeight, true);
+            this.cellHeight(o.cellHeight);
             delete o.cellHeight;
         }
         if (o.class && o.class !== opts.class) {
@@ -1309,8 +1316,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                     // restore any sub-grid back
                     if ((_a = n.subGrid) === null || _a === void 0 ? void 0 : _a.el) {
                         itemContent.appendChild(n.subGrid.el);
-                        if (!n.subGrid.opts.styleInHead)
-                            n.subGrid._updateStyles(true); // force create
+                        n.subGrid._updateContainerHeight();
                     }
                 }
                 delete w.content;
@@ -1471,7 +1477,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      */
     GridStack.prototype.margin = function (value) {
         var isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);
-        // check if we can skip re-creating our CSS file... won't check if multi values (too much hassle)
+        // check if we can skip... won't check if multi values (too much hassle)
         if (!isMultiValue) {
             var data = utils_1.Utils.parseHeight(value);
             if (this.opts.marginUnit === data.unit && this.opts.margin === data.h)
@@ -1481,7 +1487,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.opts.margin = value;
         this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;
         this._initMargin();
-        this._updateStyles(true); // true = force re-create
         return this;
     };
     /** returns current margin number value (undefined if 4 sides don't match) */
@@ -1558,75 +1563,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         this.el.dispatchEvent(event);
         return this;
     };
-    /** @internal called to delete the current dynamic style sheet used for our layout */
-    GridStack.prototype._removeStylesheet = function () {
-        if (this._styles) {
-            var styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            utils_1.Utils.removeStylesheet(this._styleSheetClass, styleLocation);
-            delete this._styles;
-        }
-        return this;
-    };
-    /** @internal updated/create the CSS styles for row based layout and initial margin setting */
-    GridStack.prototype._updateStyles = function (forceUpdate, maxH) {
-        if (forceUpdate === void 0) { forceUpdate = false; }
-        // call to delete existing one if we change cellHeight / margin
-        if (forceUpdate) {
-            this._removeStylesheet();
-        }
-        if (maxH === undefined)
-            maxH = this.getRow();
-        this._updateContainerHeight();
-        // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
-        if (this.opts.cellHeight === 0) {
-            return this;
-        }
-        var cellHeight = this.opts.cellHeight;
-        var cellHeightUnit = this.opts.cellHeightUnit;
-        var prefix = ".".concat(this._styleSheetClass, " > .").concat(this.opts.itemClass);
-        // create one as needed
-        if (!this._styles) {
-            // insert style to parent (instead of 'head' by default) to support WebComponent
-            var styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
-            this._styles = utils_1.Utils.createStylesheet(this._styleSheetClass, styleLocation, {
-                nonce: this.opts.nonce,
-            });
-            if (!this._styles)
-                return this;
-            this._styles._max = 0;
-            // these are done once only
-            utils_1.Utils.addCSSRule(this._styles, prefix, "height: ".concat(cellHeight).concat(cellHeightUnit));
-            // content margins
-            var top_1 = this.opts.marginTop + this.opts.marginUnit;
-            var bottom = this.opts.marginBottom + this.opts.marginUnit;
-            var right = this.opts.marginRight + this.opts.marginUnit;
-            var left = this.opts.marginLeft + this.opts.marginUnit;
-            var content = "".concat(prefix, " > .grid-stack-item-content");
-            var placeholder = ".".concat(this._styleSheetClass, " > .grid-stack-placeholder > .placeholder-content");
-            utils_1.Utils.addCSSRule(this._styles, content, "top: ".concat(top_1, "; right: ").concat(right, "; bottom: ").concat(bottom, "; left: ").concat(left, ";"));
-            utils_1.Utils.addCSSRule(this._styles, placeholder, "top: ".concat(top_1, "; right: ").concat(right, "; bottom: ").concat(bottom, "; left: ").concat(left, ";"));
-            // resize handles offset (to match margin)
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-n"), "top: ".concat(top_1, ";"));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-s"), "bottom: ".concat(bottom));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-ne"), "right: ".concat(right, "; top: ").concat(top_1));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-e"), "right: ".concat(right));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-se"), "right: ".concat(right, "; bottom: ").concat(bottom));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-nw"), "left: ".concat(left, "; top: ").concat(top_1));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-w"), "left: ".concat(left));
-            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-sw"), "left: ".concat(left, "; bottom: ").concat(bottom));
-        }
-        // now update the height specific fields
-        maxH = maxH || this._styles._max;
-        if (maxH > this._styles._max) {
-            var getHeight = function (rows) { return (cellHeight * rows) + cellHeightUnit; };
-            for (var i = this._styles._max + 1; i <= maxH; i++) { // start at 1
-                utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, "[gs-y=\"").concat(i, "\"]"), "top: ".concat(getHeight(i)));
-                utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, "[gs-h=\"").concat(i + 1, "\"]"), "height: ".concat(getHeight(i + 1))); // start at 2
-            }
-            this._styles._max = maxH;
-        }
-        return this;
-    };
     /** @internal */
     GridStack.prototype._updateContainerHeight = function () {
         if (!this.engine || this.engine.batchMode)
@@ -1679,14 +1615,19 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             this.prepareDragDrop(node.el);
         return this;
     };
-    /** @internal call to write position x,y,w,h attributes back to element */
+    /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */
     GridStack.prototype._writePosAttr = function (el, n) {
-        if (n.x !== undefined && n.x !== null) {
-            el.setAttribute('gs-x', String(n.x));
-        }
-        if (n.y !== undefined && n.y !== null) {
-            el.setAttribute('gs-y', String(n.y));
-        }
+        // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
+        if ((!n._moving && !n._resizing) || this._placeholder === el) {
+            // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
+            el.style.top = n.y ? (n.y === 1 ? "var(--gs-cell-height)" : "calc(".concat(n.y, " * var(--gs-cell-height))")) : null;
+            el.style.left = n.x ? (n.x === 1 ? "var(--gs-column-width)" : "calc(".concat(n.x, " * var(--gs-column-width))")) : null;
+            el.style.width = n.w > 1 ? "calc(".concat(n.w, " * var(--gs-column-width))") : null;
+            el.style.height = n.h > 1 ? "calc(".concat(n.h, " * var(--gs-cell-height))") : null;
+        }
+        // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS
+        n.x > 0 ? el.setAttribute('gs-x', String(n.x)) : el.removeAttribute('gs-x');
+        n.y > 0 ? el.setAttribute('gs-y', String(n.y)) : el.removeAttribute('gs-y');
         n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
         n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
         return this;
@@ -1884,6 +1825,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.getGridElements = function (els) { return utils_1.Utils.getElements(els); };
     /** @internal initialize margin top/bottom/left/right and units */
     GridStack.prototype._initMargin = function () {
+        var _this = this;
         var data;
         var margin = 0;
         // support passing multiple values like CSS (ex: '5px 10px 0 20px')
@@ -1907,42 +1849,27 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             margin = this.opts.margin = data.h;
         }
         // see if top/bottom/left/right need to be set as well
-        if (this.opts.marginTop === undefined) {
-            this.opts.marginTop = margin;
-        }
-        else {
-            data = utils_1.Utils.parseHeight(this.opts.marginTop);
-            this.opts.marginTop = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginBottom === undefined) {
-            this.opts.marginBottom = margin;
-        }
-        else {
-            data = utils_1.Utils.parseHeight(this.opts.marginBottom);
-            this.opts.marginBottom = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginRight === undefined) {
-            this.opts.marginRight = margin;
-        }
-        else {
-            data = utils_1.Utils.parseHeight(this.opts.marginRight);
-            this.opts.marginRight = data.h;
-            delete this.opts.margin;
-        }
-        if (this.opts.marginLeft === undefined) {
-            this.opts.marginLeft = margin;
-        }
-        else {
-            data = utils_1.Utils.parseHeight(this.opts.marginLeft);
-            this.opts.marginLeft = data.h;
-            delete this.opts.margin;
-        }
+        var keys = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];
+        keys.forEach(function (k) {
+            if (_this.opts[k] === undefined) {
+                _this.opts[k] = margin;
+            }
+            else {
+                data = utils_1.Utils.parseHeight(_this.opts[k]);
+                _this.opts[k] = data.h;
+                delete _this.opts.margin;
+            }
+        });
         this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead...
         if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {
             this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()
         }
+        // finally Update the CSS margin variables (inside the cell height) */
+        var style = this.el.style;
+        style.setProperty('--gs-item-margin-top', "".concat(this.opts.marginTop).concat(this.opts.marginUnit));
+        style.setProperty('--gs-item-margin-bottom', "".concat(this.opts.marginBottom).concat(this.opts.marginUnit));
+        style.setProperty('--gs-item-margin-right', "".concat(this.opts.marginRight).concat(this.opts.marginUnit));
+        style.setProperty('--gs-item-margin-left', "".concat(this.opts.marginLeft).concat(this.opts.marginUnit));
         return this;
     };
     /* ===========================================================================================
@@ -2365,8 +2292,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this.resizeToContentCheck(false, node);
                 if (subGrid) {
                     subGrid.parentGridNode = node;
-                    if (!subGrid.opts.styleInHead)
-                        subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
                 }
                 _this._updateContainerHeight();
             }
@@ -2425,16 +2350,16 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var noMove = node.noMove || this.opts.disableDrag;
         var noResize = node.noResize || this.opts.disableResize;
         // check for disabled grid first
-        var disable = node.locked || this.opts.staticGrid || (noMove && noResize);
+        var disable = this.opts.staticGrid || (noMove && noResize);
         if (force || disable) {
             if (node._initDD) {
                 this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
                 delete node._initDD;
             }
-            if (disable) {
+            if (disable)
                 el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
+            if (!force)
                 return this;
-            }
         }
         if (!node._initDD) {
             // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
@@ -2459,6 +2384,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 _this.placeholder.remove();
                 delete _this.placeholder.gridstackNode;
                 delete node._moving;
+                delete node._resizing;
                 delete node._event;
                 delete node._lastTried;
                 var widthChanged = node.w !== node._orig.w;
@@ -2552,6 +2478,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         node._lastUiPosition = ui.position;
         node._prevYPix = ui.position.top;
         node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)
+        node._resizing = (event.type === 'resizestart');
         delete node._lastTried;
         if (event.type === 'dropover' && node._temporaryRemoved) {
             // console.log('engine.addNode x=' + node.x); // TEST
@@ -2592,9 +2519,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             }
             // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
             var left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
-            var top_2 = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
+            var top_1 = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
             p.x = Math.round(left / cellWidth);
-            p.y = Math.round(top_2 / cellHeight);
+            p.y = Math.round(top_1 / cellHeight);
             // @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others
             var prev = this._extraDragRow;
             if (this.engine.collide(node, p)) {
@@ -2628,9 +2555,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
                 return; // skip one we tried (but failed)
             // if we size on left/top side this might move us, so get possible new position as well
             var left = ui.position.left + mLeft;
-            var top_3 = ui.position.top + mTop;
+            var top_2 = ui.position.top + mTop;
             p.x = Math.round(left / cellWidth);
-            p.y = Math.round(top_3 / cellHeight);
+            p.y = Math.round(top_2 / cellHeight);
             resizing = true;
         }
         node._event = event;
@@ -2711,7 +2638,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '11.5.0';
+    GridStack.GDRev = '12.0.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map