gridstack 7.1.1 → 7.2.0

package/dist/gridstack.js

@@ -12,7 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 7.1.1
+ * GridStack 7.2.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -21,10 +21,22 @@ exports.GridStack = void 0;
 const gridstack_engine_1 = require("./gridstack-engine");
 const utils_1 = require("./utils");
 const types_1 = require("./types");
+/*
+ * and include D&D by default
+ * TODO: while we could generate a gridstack-static.js at smaller size - saves about 31k (41k -> 72k)
+ * I don't know how to generate the DD only code at the remaining 31k to delay load as code depends on Gridstack.ts
+ * also it caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
+ */
+const dd_gridstack_1 = require("./dd-gridstack");
+const dd_touch_1 = require("./dd-touch");
+const dd_manager_1 = require("./dd-manager");
+/** global instance */
+const dd = new dd_gridstack_1.DDGridStack;
 // export all dependent file as well to make it easier for users to just import the main file
 __exportStar(require("./types"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./gridstack-engine"), exports);
+__exportStar(require("./dd-gridstack"), exports);
 /**
  * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
  * Note: your grid elements MUST have the following classes for the CSS layout to work:
@@ -49,6 +61,9 @@ class GridStack {
         this._extraDragRow = 0;
         this.el = el; // exposed HTML element to the user
         opts = opts || {}; // handles null/undefined/0
+        if (!el.classList.contains('grid-stack')) {
+            this.el.classList.add('grid-stack');
+        }
         // if row property exists, replace minRow and maxRow instead
         if (opts.row) {
             opts.minRow = opts.maxRow = opts.row;
@@ -163,6 +178,13 @@ class GridStack {
             elements.sort((a, b) => b.i - a.i).forEach(e => this._prepareElement(e.el)); // revert sort so lowest item wins
             this.batchUpdate(false);
         }
+        // load any passed in children as well, which overrides any DOM layout done above
+        if (this.opts.children) {
+            let children = this.opts.children;
+            delete this.opts.children;
+            if (children.length)
+                this.load(children); // don't load empty
+        }
         this.setAnimation(this.opts.animate);
         this._updateStyles();
         if (this.opts.column != 12) {
@@ -257,11 +279,6 @@ class GridStack {
         }
         // create grid class and load any children
         let grid = GridStack.init(opt, el);
-        if (grid.opts.children) {
-            let children = grid.opts.children;
-            delete grid.opts.children;
-            grid.load(children);
-        }
         return grid;
     }
     /** call this method to register your engine instead of the default one.
@@ -305,28 +322,39 @@ class GridStack {
             return w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;
         }
         let el;
+        let node;
         if (typeof els === 'string') {
             let doc = document.implementation.createHTMLDocument(''); // IE needs a param
             doc.body.innerHTML = els;
             el = doc.body.children[0];
         }
         else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
-            let content = els ? els.content || '' : '';
-            options = els;
-            let doc = document.implementation.createHTMLDocument(''); // IE needs a param
-            doc.body.innerHTML = `<div class="grid-stack-item ${this.opts.itemClass || ''}"><div class="grid-stack-item-content">${content}</div></div>`;
-            el = doc.body.children[0];
+            node = options = els;
+            if (node === null || node === void 0 ? void 0 : node.el) {
+                el = node.el; // re-use element stored in the node
+            }
+            else if (this.opts.addRemoveCB) {
+                el = this.opts.addRemoveCB(this, options, true);
+            }
+            else {
+                let content = (options === null || options === void 0 ? void 0 : options.content) || '';
+                let doc = document.implementation.createHTMLDocument(''); // IE needs a param
+                doc.body.innerHTML = `<div class="grid-stack-item ${this.opts.itemClass || ''}"><div class="grid-stack-item-content">${content}</div></div>`;
+                el = doc.body.children[0];
+            }
         }
         else {
             el = els;
         }
+        if (!el)
+            return;
         // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
-        // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz) before adding the node.
+        // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
         // So make sure we load any DOM attributes that are not specified in passed in options (which override)
         let domAttr = this._readAttr(el);
         options = utils_1.Utils.cloneDeep(options) || {}; // make a copy before we modify in case caller re-uses it
         utils_1.Utils.defaults(options, domAttr);
-        let node = this.engine.prepareNode(options);
+        node = this.engine.prepareNode(options);
         this._writeAttr(el, options);
         if (this._insertNotAppend) {
             this.el.prepend(el);
@@ -378,6 +406,7 @@ class GridStack {
             ops.disableOneColumnMode = true; // driven by parent
         }
         // if we're converting an existing full item, move over the content to be the first sub item in the new grid
+        // TODO: support this.opts.addRemoveCB for frameworks
         let content = node.el.querySelector('.grid-stack-item-content');
         let newItem;
         let newItemOpt;
@@ -529,7 +558,7 @@ class GridStack {
      * @example
      * see http://gridstackjs.com/demo/serialization.html
      **/
-    load(layout, addAndRemove = true) {
+    load(layout, addRemove = this.opts.addRemoveCB || true) {
         let items = GridStack.Utils.sort([...layout], -1, this._prevColumn || this.getColumn()); // make copy before we mod/sort
         this._insertNotAppend = true; // since create in reverse order...
         // if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
@@ -538,21 +567,22 @@ class GridStack {
             this._ignoreLayoutsNodeChange = true; // skip layout update
             this.engine.cacheLayout(items, this._prevColumn, true);
         }
+        // if given a different callback, temporally set it as global option to creating will use it
+        const prevCB = this.opts.addRemoveCB;
+        if (typeof (addRemove) === 'function')
+            this.opts.addRemoveCB = addRemove;
         let removed = [];
         this.batchUpdate();
         // see if any items are missing from new layout and need to be removed first
-        if (addAndRemove) {
+        if (addRemove) {
             let copyNodes = [...this.engine.nodes]; // don't loop through array you modify
             copyNodes.forEach(n => {
                 let item = items.find(w => n.id === w.id);
                 if (!item) {
-                    if (typeof (addAndRemove) === 'function') {
-                        addAndRemove(this, n, false);
-                    }
-                    else {
-                        removed.push(n); // batch keep track
-                        this.removeWidget(n.el, true, false);
-                    }
+                    if (this.opts.addRemoveCB)
+                        this.opts.addRemoveCB(this, n, false);
+                    removed.push(n); // batch keep track
+                    this.removeWidget(n.el, true, false);
                 }
             });
         }
@@ -569,13 +599,8 @@ class GridStack {
                     }
                 }
             }
-            else if (addAndRemove) {
-                if (typeof (addAndRemove) === 'function') {
-                    w = addAndRemove(this, w, true).gridstackNode;
-                }
-                else {
-                    w = this.addWidget(w).gridstackNode;
-                }
+            else if (addRemove) {
+                this.addWidget(w);
             }
         });
         this.engine.removedNodes = removed;
@@ -583,6 +608,7 @@ class GridStack {
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
+        prevCB ? this.opts.addRemoveCB = prevCB : delete this.opts.addRemoveCB;
         return this;
     }
     /**
@@ -960,14 +986,20 @@ class GridStack {
      * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
      * Also toggle the grid-stack-static class.
      * @param val if true the grid become static.
+     * @param updateClass true (default) if css class gets updated
+     * @param recurse true (default) if sub-grids also get updated
      */
-    setStatic(val, updateClass = true) {
+    setStatic(val, updateClass = true, recurse = true) {
         if (this.opts.staticGrid === val)
             return this;
         this.opts.staticGrid = val;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
-        this.engine.nodes.forEach(n => this._prepareDragDropByNode(n)); // either delete or init Drag&drop
+        this.engine.nodes.forEach(n => {
+            this._prepareDragDropByNode(n); // either delete or init Drag&drop
+            if (n.subGrid && recurse)
+                n.subGrid.setStatic(val, updateClass, recurse);
+        });
         if (updateClass) {
             this._setStaticClass();
         }
@@ -1226,10 +1258,8 @@ class GridStack {
     }
     /** @internal */
     _prepareElement(el, triggerAddEvent = false, node) {
-        if (!node) {
-            el.classList.add(this.opts.itemClass);
-            node = this._readAttr(el);
-        }
+        el.classList.add(this.opts.itemClass);
+        node = node || this._readAttr(el);
         el.gridstackNode = node;
         node.el = el;
         node.grid = this;
@@ -1273,7 +1303,6 @@ class GridStack {
             noMove: 'gs-no-move',
             locked: 'gs-locked',
             id: 'gs-id',
-            resizeHandles: 'gs-resize-handles'
         };
         for (const key in attrs) {
             if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway
@@ -1300,7 +1329,6 @@ class GridStack {
         node.noResize = utils_1.Utils.toBool(el.getAttribute('gs-no-resize'));
         node.noMove = utils_1.Utils.toBool(el.getAttribute('gs-no-move'));
         node.locked = utils_1.Utils.toBool(el.getAttribute('gs-locked'));
-        node.resizeHandles = el.getAttribute('gs-resize-handles');
         node.id = el.getAttribute('gs-id');
         // remove any key not found (null or false which is default)
         for (const key in node) {
@@ -1460,14 +1488,15 @@ class GridStack {
         }
         return this;
     }
-    /*
-     * drag&drop empty stubs that will be implemented in dd-gridstack.ts for non static grid
-     * so we don't incur the load unless needed.
-     * NOTE: had to make those methods public in order to define them else as
-     *   GridStack.prototype._setupAcceptWidget = function()
-     * maybe there is a better way ????
+    /* ===========================================================================================
+     * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts
+     * but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039
+     * ===========================================================================================
      */
-    /* eslint-disable @typescript-eslint/no-unused-vars */
+    /** get the global (but static to this code) DD implementation */
+    static getDD() {
+        return dd;
+    }
     /**
      * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
      * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
@@ -1475,20 +1504,59 @@ class GridStack {
      * @param dragIn string selector (ex: '.sidebar .grid-stack-item')
      * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}
      **/
-    static setupDragIn(dragIn, dragInOptions) { }
+    static setupDragIn(dragIn, dragInOptions) {
+        if ((dragInOptions === null || dragInOptions === void 0 ? void 0 : dragInOptions.pause) !== undefined) {
+            dd_manager_1.DDManager.pauseDrag = dragInOptions.pause;
+        }
+        if (typeof dragIn === 'string') {
+            dragInOptions = Object.assign(Object.assign({}, types_1.dragInDefaultOptions), (dragInOptions || {}));
+            utils_1.Utils.getElements(dragIn).forEach(el => {
+                if (!dd.isDraggable(el))
+                    dd.dragIn(el, dragInOptions);
+            });
+        }
+    }
     /**
      * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.
      * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.
      * @param els widget or selector to modify.
      * @param val if true widget will be draggable.
      */
-    movable(els, val) { return this; }
+    movable(els, val) {
+        if (this.opts.staticGrid)
+            return this; // can't move a static grid!
+        GridStack.getElements(els).forEach(el => {
+            let node = el.gridstackNode;
+            if (!node)
+                return;
+            if (val)
+                delete node.noMove;
+            else
+                node.noMove = true;
+            this._prepareDragDropByNode(node); // init DD if need be, and adjust
+        });
+        return this;
+    }
     /**
      * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.
      * @param els  widget or selector to modify
      * @param val  if true widget will be resizable.
      */
-    resizable(els, val) { return this; }
+    resizable(els, val) {
+        if (this.opts.staticGrid)
+            return this; // can't resize a static grid!
+        GridStack.getElements(els).forEach(el => {
+            let node = el.gridstackNode;
+            if (!node)
+                return;
+            if (val)
+                delete node.noResize;
+            else
+                node.noResize = true;
+            this._prepareDragDropByNode(node); // init DD if need be, and adjust
+        });
+        return this;
+    }
     /**
      * Temporarily disables widgets moving/resizing.
      * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
@@ -1497,8 +1565,16 @@ class GridStack {
      * @example
      *  grid.enableMove(false);
      *  grid.enableResize(false);
+     * @param recurse true (default) if sub-grids also get updated
      */
-    disable() { return this; }
+    disable(recurse = true) {
+        if (this.opts.staticGrid)
+            return;
+        this.enableMove(false, recurse);
+        this.enableResize(false, recurse); // @ts-ignore
+        this._triggerEvent('disable');
+        return this;
+    }
     /**
      * Re-enables widgets moving/resizing - see disable().
      * Note: no-op for static grid.
@@ -1506,30 +1582,552 @@ class GridStack {
      * @example
      *  grid.enableMove(true);
      *  grid.enableResize(true);
+     * @param recurse true (default) if sub-grids also get updated
      */
-    enable() { return this; }
+    enable(recurse = true) {
+        if (this.opts.staticGrid)
+            return;
+        this.enableMove(true, recurse);
+        this.enableResize(true, recurse); // @ts-ignore
+        this._triggerEvent('enable');
+        return this;
+    }
     /**
      * Enables/disables widget moving. No-op for static grids.
+     * @param recurse true (default) if sub-grids also get updated
      */
-    enableMove(doEnable) { return this; }
+    enableMove(doEnable, recurse = true) {
+        if (this.opts.staticGrid)
+            return this; // can't move a static grid!
+        this.opts.disableDrag = !doEnable; // FIRST before we update children as grid overrides #1658
+        this.engine.nodes.forEach(n => {
+            this.movable(n.el, doEnable);
+            if (n.subGrid && recurse)
+                n.subGrid.enableMove(doEnable, recurse);
+        });
+        return this;
+    }
     /**
      * Enables/disables widget resizing. No-op for static grids.
+     * @param recurse true (default) if sub-grids also get updated
      */
-    enableResize(doEnable) { return this; }
+    enableResize(doEnable, recurse = true) {
+        if (this.opts.staticGrid)
+            return this; // can't size a static grid!
+        this.opts.disableResize = !doEnable; // FIRST before we update children as grid overrides #1658
+        this.engine.nodes.forEach(n => {
+            this.resizable(n.el, doEnable);
+            if (n.subGrid && recurse)
+                n.subGrid.enableResize(doEnable, recurse);
+        });
+        return this;
+    }
     /** @internal removes any drag&drop present (called during destroy) */
-    _removeDD(el) { return this; }
-    /** @internal called to add drag over support to support widgets */
-    _setupAcceptWidget() { return this; }
+    _removeDD(el) {
+        dd.draggable(el, 'destroy').resizable(el, 'destroy');
+        if (el.gridstackNode) {
+            delete el.gridstackNode._initDD; // reset our DD init flag
+        }
+        delete el.ddElement;
+        return this;
+    }
+    /** @internal called to add drag over to support widgets being added externally */
+    _setupAcceptWidget() {
+        // check if we need to disable things
+        if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {
+            dd.droppable(this.el, 'destroy');
+            return this;
+        }
+        // vars shared across all methods
+        let cellHeight, cellWidth;
+        let onDrag = (event, el, helper) => {
+            let node = el.gridstackNode;
+            if (!node)
+                return;
+            helper = helper || el;
+            let parent = this.el.getBoundingClientRect();
+            let { top, left } = helper.getBoundingClientRect();
+            left -= parent.left;
+            top -= parent.top;
+            let ui = { position: { top, left } };
+            if (node._temporaryRemoved) {
+                node.x = Math.max(0, Math.round(left / cellWidth));
+                node.y = Math.max(0, Math.round(top / cellHeight));
+                delete node.autoPosition;
+                this.engine.nodeBoundFix(node);
+                // don't accept *initial* location if doesn't fit #1419 (locked drop region, or can't grow), but maybe try if it will go somewhere
+                if (!this.engine.willItFit(node)) {
+                    node.autoPosition = true; // ignore x,y and try for any slot...
+                    if (!this.engine.willItFit(node)) {
+                        dd.off(el, 'drag'); // stop calling us
+                        return; // full grid or can't grow
+                    }
+                    if (node._willFitPos) {
+                        // use the auto position instead #1687
+                        utils_1.Utils.copyPos(node, node._willFitPos);
+                        delete node._willFitPos;
+                    }
+                }
+                // re-use the existing node dragging method
+                this._onStartMoving(helper, event, ui, node, cellWidth, cellHeight);
+            }
+            else {
+                // re-use the existing node dragging that does so much of the collision detection
+                this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);
+            }
+        };
+        dd.droppable(this.el, {
+            accept: (el) => {
+                let node = el.gridstackNode;
+                // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
+                if ((node === null || node === void 0 ? void 0 : node.grid) === this)
+                    return true;
+                if (!this.opts.acceptWidgets)
+                    return false;
+                // check for accept method or class matching
+                let canAccept = true;
+                if (typeof this.opts.acceptWidgets === 'function') {
+                    canAccept = this.opts.acceptWidgets(el);
+                }
+                else {
+                    let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets);
+                    canAccept = el.matches(selector);
+                }
+                // finally check to make sure we actually have space left #1571
+                if (canAccept && node && this.opts.maxRow) {
+                    let n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
+                    canAccept = this.engine.willItFit(n);
+                }
+                return canAccept;
+            }
+        })
+            /**
+             * entering our grid area
+             */
+            .on(this.el, 'dropover', (event, el, helper) => {
+            // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
+            let node = el.gridstackNode;
+            // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item
+            if ((node === null || node === void 0 ? void 0 : node.grid) === this && !node._temporaryRemoved) {
+                // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)
+                return false; // prevent parent from receiving msg (which may be a grid as well)
+            }
+            // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now
+            if ((node === null || node === void 0 ? void 0 : node.grid) && node.grid !== this && !node._temporaryRemoved) {
+                // console.log('dropover without leave'); // TEST
+                let otherGrid = node.grid;
+                otherGrid._leave(el, helper);
+            }
+            // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...
+            cellWidth = this.cellWidth();
+            cellHeight = this.getCellHeight(true);
+            // load any element attributes if we don't have a node
+            if (!node) { // @ts-ignore private read only on ourself
+                node = this._readAttr(el);
+            }
+            if (!node.grid) {
+                node._isExternal = true;
+                el.gridstackNode = node;
+            }
+            // calculate the grid size based on element outer size
+            helper = helper || el;
+            let w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;
+            let h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;
+            // if the item came from another grid, make a copy and save the original info in case we go back there
+            if (node.grid && node.grid !== this) {
+                // copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific
+                // console.log('dropover cloning node'); // TEST
+                if (!el._gridstackNodeOrig)
+                    el._gridstackNodeOrig = node; // shouldn't have multiple nested!
+                el.gridstackNode = node = Object.assign(Object.assign({}, node), { w, h, grid: this });
+                this.engine.cleanupNode(node)
+                    .nodeBoundFix(node);
+                // restore some internal fields we need after clearing them all
+                node._initDD =
+                    node._isExternal = // DOM needs to be re-parented on a drop
+                        node._temporaryRemoved = true; // so it can be inserted onDrag below
+            }
+            else {
+                node.w = w;
+                node.h = h;
+                node._temporaryRemoved = true; // so we can insert it
+            }
+            // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)
+            this._itemRemoving(node.el, false);
+            dd.on(el, 'drag', onDrag);
+            // make sure this is called at least once when going fast #1578
+            onDrag(event, el, helper);
+            return false; // prevent parent from receiving msg (which may be a grid as well)
+        })
+            /**
+             * Leaving our grid area...
+             */
+            .on(this.el, 'dropout', (event, el, helper) => {
+            // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
+            let node = el.gridstackNode;
+            if (!node)
+                return false;
+            // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)
+            // so skip this one if we're not the active grid really..
+            if (!node.grid || node.grid === this) {
+                this._leave(el, helper);
+                // if we were created as temporary nested grid, go back to before state
+                if (this._isTemp) {
+                    this.removeAsSubGrid(node);
+                }
+            }
+            return false; // prevent parent from receiving msg (which may be grid as well)
+        })
+            /**
+             * end - releasing the mouse
+             */
+            .on(this.el, 'drop', (event, el, helper) => {
+            var _a, _b;
+            let node = el.gridstackNode;
+            // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
+            if ((node === null || node === void 0 ? void 0 : node.grid) === this && !node._isExternal)
+                return false;
+            let wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
+            this.placeholder.remove();
+            // notify previous grid of removal
+            // console.log('drop delete _gridstackNodeOrig') // TEST
+            let origNode = el._gridstackNodeOrig;
+            delete el._gridstackNodeOrig;
+            if (wasAdded && (origNode === null || origNode === void 0 ? void 0 : origNode.grid) && origNode.grid !== this) {
+                let oGrid = origNode.grid;
+                oGrid.engine.removedNodes.push(origNode);
+                oGrid._triggerRemoveEvent();
+                // if it's an empty sub-grid, to get auto-created, nuke it
+                if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {
+                    oGrid.removeAsSubGrid();
+                }
+            }
+            if (!node)
+                return false;
+            // use existing placeholder node as it's already in our list with drop location
+            if (wasAdded) {
+                this.engine.cleanupNode(node); // removes all internal _xyz values
+                node.grid = this;
+            }
+            dd.off(el, 'drag');
+            // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)
+            // as the helper will be nuked by jquery-ui otherwise
+            if (helper !== el) {
+                helper.remove();
+                el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info
+                if (wasAdded) {
+                    el = el.cloneNode(true);
+                }
+            }
+            else {
+                el.remove(); // reduce flicker as we change depth here, and size further down
+                this._removeDD(el);
+            }
+            if (!wasAdded)
+                return false;
+            el.gridstackNode = node;
+            node.el = el;
+            let subGrid = (_b = (_a = node.subGrid) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.gridstack; // set when actual sub-grid present
+            // @ts-ignore
+            utils_1.Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
+            utils_1.Utils.removePositioningStyles(el); // @ts-ignore
+            this._writeAttr(el, node);
+            this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
+            if (subGrid) {
+                subGrid.parentGridItem = node;
+                if (!subGrid.opts.styleInHead)
+                    subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
+            }
+            this._updateContainerHeight();
+            this.engine.addedNodes.push(node); // @ts-ignore
+            this._triggerAddEvent(); // @ts-ignore
+            this._triggerChangeEvent();
+            this.engine.endUpdate();
+            if (this._gsEventHandler['dropped']) {
+                this._gsEventHandler['dropped'](Object.assign(Object.assign({}, event), { type: 'dropped' }), origNode && origNode.grid ? origNode : undefined, node);
+            }
+            // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
+            window.setTimeout(() => {
+                // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())
+                if (node.el && node.el.parentElement) {
+                    this._prepareDragDropByNode(node);
+                }
+                else {
+                    this.engine.removeNode(node);
+                }
+                delete node.grid._isTemp;
+            });
+            return false; // prevent parent from receiving msg (which may be grid as well)
+        });
+        return this;
+    }
+    /** @internal mark item for removal */
+    _itemRemoving(el, remove) {
+        let node = el ? el.gridstackNode : undefined;
+        if (!node || !node.grid)
+            return;
+        remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;
+        remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
+    }
     /** @internal called to setup a trash drop zone if the user specifies it */
-    _setupRemoveDrop() { return this; }
+    _setupRemoveDrop() {
+        if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
+            let trashEl = document.querySelector(this.opts.removable);
+            if (!trashEl)
+                return this;
+            // only register ONE drop-over/dropout callback for the 'trash', and it will
+            // update the passed in item and parent grid because the 'trash' is a shared resource anyway,
+            // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)
+            if (!dd.isDroppable(trashEl)) {
+                dd.droppable(trashEl, this.opts.removableOptions)
+                    .on(trashEl, 'dropover', (event, el) => this._itemRemoving(el, true))
+                    .on(trashEl, 'dropout', (event, el) => this._itemRemoving(el, false));
+            }
+        }
+        return this;
+    }
     /** @internal prepares the element for drag&drop **/
-    _prepareDragDropByNode(node) { return this; }
+    _prepareDragDropByNode(node) {
+        let el = node.el;
+        const noMove = node.noMove || this.opts.disableDrag;
+        const noResize = node.noResize || this.opts.disableResize;
+        // check for disabled grid first
+        if (this.opts.staticGrid || (noMove && noResize)) {
+            if (node._initDD) {
+                this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
+                delete node._initDD;
+            }
+            el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435
+            return this;
+        }
+        if (!node._initDD) {
+            // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
+            let cellWidth;
+            let cellHeight;
+            /** called when item starts moving/resizing */
+            let onStartMoving = (event, ui) => {
+                // trigger any 'dragstart' / 'resizestart' manually
+                if (this._gsEventHandler[event.type]) {
+                    this._gsEventHandler[event.type](event, event.target);
+                }
+                cellWidth = this.cellWidth();
+                cellHeight = this.getCellHeight(true); // force pixels for calculations
+                this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);
+            };
+            /** called when item is being dragged/resized */
+            let dragOrResize = (event, ui) => {
+                this._dragOrResize(el, event, ui, node, cellWidth, cellHeight);
+            };
+            /** called when the item stops moving/resizing */
+            let onEndMoving = (event) => {
+                this.placeholder.remove();
+                delete node._moving;
+                delete node._event;
+                delete node._lastTried;
+                // if the item has moved to another grid, we're done here
+                let target = event.target;
+                if (!target.gridstackNode || target.gridstackNode.grid !== this)
+                    return;
+                node.el = target;
+                if (node._isAboutToRemove) {
+                    let gridToNotify = el.gridstackNode.grid;
+                    if (gridToNotify._gsEventHandler[event.type]) {
+                        gridToNotify._gsEventHandler[event.type](event, target);
+                    }
+                    this._removeDD(el);
+                    gridToNotify.engine.removedNodes.push(node);
+                    gridToNotify._triggerRemoveEvent();
+                    // break circular links and remove DOM
+                    delete el.gridstackNode;
+                    delete node.el;
+                    el.remove();
+                }
+                else {
+                    utils_1.Utils.removePositioningStyles(target);
+                    if (node._temporaryRemoved) {
+                        // got removed - restore item back to before dragging position
+                        utils_1.Utils.copyPos(node, node._orig); // @ts-ignore
+                        this._writePosAttr(target, node);
+                        this.engine.addNode(node);
+                    }
+                    else {
+                        // move to new placeholder location
+                        this._writePosAttr(target, node);
+                    }
+                    if (this._gsEventHandler[event.type]) {
+                        this._gsEventHandler[event.type](event, target);
+                    }
+                }
+                // @ts-ignore
+                this._extraDragRow = 0; // @ts-ignore
+                this._updateContainerHeight(); // @ts-ignore
+                this._triggerChangeEvent();
+                this.engine.endUpdate();
+            };
+            dd.draggable(el, {
+                start: onStartMoving,
+                stop: onEndMoving,
+                drag: dragOrResize
+            }).resizable(el, {
+                start: onStartMoving,
+                stop: onEndMoving,
+                resize: dragOrResize
+            });
+            node._initDD = true; // we've set DD support now
+        }
+        // finally fine tune move vs resize by disabling any part...
+        dd.draggable(el, noMove ? 'disable' : 'enable')
+            .resizable(el, noResize ? 'disable' : 'enable');
+        return this;
+    }
     /** @internal handles actual drag/resize start **/
-    _onStartMoving(el, event, ui, node, cellWidth, cellHeight) { return; }
+    _onStartMoving(el, event, ui, node, cellWidth, cellHeight) {
+        this.engine.cleanNodes()
+            .beginUpdate(node);
+        // @ts-ignore
+        this._writePosAttr(this.placeholder, node);
+        this.el.appendChild(this.placeholder);
+        // console.log('_onStartMoving placeholder') // TEST
+        node.el = this.placeholder;
+        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)
+        delete node._lastTried;
+        if (event.type === 'dropover' && node._temporaryRemoved) {
+            // console.log('engine.addNode x=' + node.x); // TEST
+            this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
+            node._moving = true; // AFTER, mark as moving object (wanted fix location before)
+        }
+        // set the min/max resize info
+        this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft);
+        if (event.type === 'resizestart') {
+            dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
+                .resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
+            if (node.maxW) {
+                dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
+            }
+            if (node.maxH) {
+                dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
+            }
+        }
+    }
     /** @internal handles actual drag/resize **/
-    _dragOrResize(el, event, ui, node, cellWidth, cellHeight) { return; }
-    /** @internal called when a node leaves our area (mouse out or shape outside) **/
-    _leave(el, helper) { return; }
+    _dragOrResize(el, event, ui, node, cellWidth, cellHeight) {
+        let p = Object.assign({}, node._orig); // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
+        let resizing;
+        let mLeft = this.opts.marginLeft, mRight = this.opts.marginRight, mTop = this.opts.marginTop, mBottom = this.opts.marginBottom;
+        // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855
+        let mHeight = Math.round(cellHeight * 0.1), mWidth = Math.round(cellWidth * 0.1);
+        mLeft = Math.min(mLeft, mWidth);
+        mRight = Math.min(mRight, mWidth);
+        mTop = Math.min(mTop, mHeight);
+        mBottom = Math.min(mBottom, mHeight);
+        if (event.type === 'drag') {
+            if (node._temporaryRemoved)
+                return; // handled by dropover
+            let distance = ui.position.top - node._prevYPix;
+            node._prevYPix = ui.position.top;
+            utils_1.Utils.updateScrollPosition(el, ui.position, distance);
+            // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)
+            let left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);
+            let top = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);
+            p.x = Math.round(left / cellWidth);
+            p.y = Math.round(top / 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
+            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);
+                } // @ts-ignore
+                this._extraDragRow = extra; // @ts-ignore
+            }
+            else
+                this._extraDragRow = 0; // @ts-ignore
+            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;
+        }
+        else if (event.type === 'resize') {
+            if (p.x < 0)
+                return;
+            // Scrolling page if needed
+            utils_1.Utils.updateScrollResize(event, el, cellHeight);
+            // get new size
+            p.w = Math.round((ui.size.width - mLeft) / cellWidth);
+            p.h = Math.round((ui.size.height - mTop) / cellHeight);
+            if (node.w === p.w && node.h === p.h)
+                return;
+            if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h)
+                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
+            let left = ui.position.left + mLeft;
+            let top = ui.position.top + mTop;
+            p.x = Math.round(left / cellWidth);
+            p.y = Math.round(top / cellHeight);
+            resizing = true;
+        }
+        node._event = event;
+        node._lastTried = p; // set as last tried (will nuke if we go there)
+        let rect = {
+            x: ui.position.left + mLeft,
+            y: ui.position.top + mTop,
+            w: (ui.size ? ui.size.width : node.w * cellWidth) - mLeft - mRight,
+            h: (ui.size ? ui.size.height : node.h * cellHeight) - mTop - mBottom
+        };
+        if (this.engine.moveNodeCheck(node, Object.assign(Object.assign({}, p), { cellWidth, cellHeight, rect, resizing }))) {
+            node._lastUiPosition = ui.position;
+            this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);
+            delete node._skipDown;
+            if (resizing && node.subGrid) {
+                node.subGrid.onParentResize();
+            } // @ts-ignore
+            this._extraDragRow = 0; // @ts-ignore
+            this._updateContainerHeight();
+            let target = event.target; // @ts-ignore
+            this._writePosAttr(target, node);
+            if (this._gsEventHandler[event.type]) {
+                this._gsEventHandler[event.type](event, target);
+            }
+        }
+    }
+    /** @internal called when item leaving our area by either cursor dropout event
+     * or shape is outside our boundaries. remove it from us, and mark temporary if this was
+     * our item to start with else restore prev node values from prev grid it came from.
+     **/
+    _leave(el, helper) {
+        let node = el.gridstackNode;
+        if (!node)
+            return;
+        dd.off(el, 'drag'); // no need to track while being outside
+        // this gets called when cursor leaves and shape is outside, so only do this once
+        if (node._temporaryRemoved)
+            return;
+        node._temporaryRemoved = true;
+        this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue
+        node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged
+        if (this.opts.removable === true) { // boolean vs a class string
+            // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so
+            this._itemRemoving(el, true);
+        }
+        // finally if item originally came from another grid, but left us, restore things back to prev info
+        if (el._gridstackNodeOrig) {
+            // console.log('leave delete _gridstackNodeOrig') // TEST
+            el.gridstackNode = el._gridstackNodeOrig;
+            delete el._gridstackNodeOrig;
+        }
+        else if (node._isExternal) {
+            // item came from outside (like a toolbar) so nuke any node info
+            delete node.el;
+            delete el.gridstackNode;
+            // and restore all nodes back to original
+            this.engine.restoreInitial();
+        }
+    }
     // legacy method removed
     commit() { utils_1.obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }
 }
@@ -1538,8 +2136,5 @@ exports.GridStack = GridStack;
 GridStack.Utils = utils_1.Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = gridstack_engine_1.GridStackEngine;
-GridStack.GDRev = '7.1.1';
-const dd_touch_1 = require("./dd-touch");
-const dd_manager_1 = require("./dd-manager");
-__exportStar(require("./dd-gridstack"), exports);
+GridStack.GDRev = '7.2.0';
 //# sourceMappingURL=gridstack.js.map