gridstack 5.1.0 → 6.0.1

package/dist/es5/dd-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-element.js","sourceRoot":"","sources":["../../src/dd-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-elements.ts 6.0.1\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\n */\n\nimport { DDResizable, DDResizableOpt } from './dd-resizable';\nimport { GridItemHTMLElement } from './types';\nimport { DDDraggable, DDDraggableOpt } from './dd-draggable';\nimport { DDDroppable, DDDroppableOpt } from './dd-droppable';\n\nexport interface DDElementHost extends GridItemHTMLElement {\n  ddElement?: DDElement;\n}\n\nexport class DDElement {\n\n  static init(el: DDElementHost): DDElement {\n    if (!el.ddElement) { el.ddElement = new DDElement(el); }\n    return el.ddElement;\n  }\n\n  public el: DDElementHost;\n  public ddDraggable?: DDDraggable;\n  public ddDroppable?: DDDroppable;\n  public ddResizable?: DDResizable;\n\n  constructor(el: DDElementHost) {\n    this.el = el;\n  }\n\n  public on(eventName: string, callback: (event: MouseEvent) => void): DDElement {\n    if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {\n      this.ddDraggable.on(eventName as 'drag' | 'dragstart' | 'dragstop', callback);\n    } else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {\n      this.ddDroppable.on(eventName as 'drop' | 'dropover' | 'dropout', callback);\n    } else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {\n      this.ddResizable.on(eventName as 'resizestart' | 'resize' | 'resizestop', callback);\n    }\n    return this;\n  }\n\n  public off(eventName: string): DDElement {\n    if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {\n      this.ddDraggable.off(eventName as 'drag' | 'dragstart' | 'dragstop');\n    } else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {\n      this.ddDroppable.off(eventName as 'drop' | 'dropover' | 'dropout');\n    } else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {\n      this.ddResizable.off(eventName as 'resizestart' | 'resize' | 'resizestop');\n    }\n    return this;\n  }\n\n  public setupDraggable(opts: DDDraggableOpt): DDElement {\n    if (!this.ddDraggable) {\n      this.ddDraggable = new DDDraggable(this.el, opts);\n    } else {\n      this.ddDraggable.updateOption(opts);\n    }\n    return this;\n  }\n\n  public cleanDraggable(): DDElement {\n    if (this.ddDraggable) {\n      this.ddDraggable.destroy();\n      delete this.ddDraggable;\n    }\n    return this;\n  }\n\n  public setupResizable(opts: DDResizableOpt): DDElement {\n    if (!this.ddResizable) {\n      this.ddResizable = new DDResizable(this.el, opts);\n    } else {\n      this.ddResizable.updateOption(opts);\n    }\n    return this;\n  }\n\n  public cleanResizable(): DDElement {\n    if (this.ddResizable) {\n      this.ddResizable.destroy();\n      delete this.ddResizable;\n    }\n    return this;\n  }\n\n  public setupDroppable(opts: DDDroppableOpt): DDElement {\n    if (!this.ddDroppable) {\n      this.ddDroppable = new DDDroppable(this.el, opts);\n    } else {\n      this.ddDroppable.updateOption(opts);\n    }\n    return this;\n  }\n\n  public cleanDroppable(): DDElement {\n    if (this.ddDroppable) {\n      this.ddDroppable.destroy();\n      delete this.ddDroppable;\n    }\n    return this;\n  }\n}\n"]}

package/dist/es5/dd-gridstack.d.ts

@@ -0,0 +1,36 @@
+/**
+ * dd-gridstack.ts 6.0.1
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ */
+import { GridItemHTMLElement, GridStackElement, DDDragInOpt } from './types';
+import { DDElementHost } from './dd-element';
+/** Drag&Drop drop options */
+export declare type DDDropOpt = {
+    /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */
+    accept?: (el: GridItemHTMLElement) => boolean;
+};
+/** drag&drop options currently called from the main code, but others can be passed in grid options */
+export declare type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
+export declare type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
+export declare type DDValue = number | string;
+/** drag&drop events callbacks */
+export declare type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
+/**
+ * HTML Native Mouse and Touch Events Drag and Drop functionality.
+ */
+export declare class DDGridStack {
+    /** get the global (but static to this code) DD implementation */
+    static get(): DDGridStack;
+    resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack;
+    draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack;
+    dragIn(el: GridStackElement, opts: DDDragInOpt): DDGridStack;
+    droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): DDGridStack;
+    /** true if element is droppable */
+    isDroppable(el: DDElementHost): boolean;
+    /** true if element is draggable */
+    isDraggable(el: DDElementHost): boolean;
+    /** true if element is draggable */
+    isResizable(el: DDElementHost): boolean;
+    on(el: GridItemHTMLElement, name: string, callback: DDCallback): DDGridStack;
+    off(el: GridItemHTMLElement, name: string): DDGridStack;
+}

package/dist/es5/{gridstack-dd.js → dd-gridstack.js}

@@ -1,21 +1,8 @@
 "use strict";
 /**
- * gridstack-dd.ts 5.1.0
+ * dd-gridstack.ts 6.0.1
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -28,38 +15,143 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridStackDD = void 0;
-/* eslint-disable @typescript-eslint/no-unused-vars */
-var gridstack_ddi_1 = require("./gridstack-ddi");
+exports.DDGridStack = void 0;
 var gridstack_1 = require("./gridstack");
 var utils_1 = require("./utils");
-// TEST let count = 0;
+var dd_manager_1 = require("./dd-manager");
+var dd_element_1 = require("./dd-element");
+// let count = 0; // TEST
 /**
- * Base class implementing common Grid drag'n'drop functionality, with domain specific subclass (h5 vs jq subclasses)
+ * HTML Native Mouse and Touch Events Drag and Drop functionality.
  */
-var GridStackDD = /** @class */ (function (_super) {
-    __extends(GridStackDD, _super);
-    function GridStackDD() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var DDGridStack = /** @class */ (function () {
+    function DDGridStack() {
     }
-    /** override to cast to correct type */
-    GridStackDD.get = function () {
-        return gridstack_ddi_1.GridStackDDI.get();
+    /** get the global (but static to this code) DD implementation */
+    DDGridStack.get = function () {
+        return dd;
+    };
+    DDGridStack.prototype.resizable = function (el, opts, key, value) {
+        this._getDDElements(el).forEach(function (dEl) {
+            var _a;
+            if (opts === 'disable' || opts === 'enable') {
+                dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable()
+            }
+            else if (opts === 'destroy') {
+                dEl.ddResizable && dEl.cleanResizable();
+            }
+            else if (opts === 'option') {
+                dEl.setupResizable((_a = {}, _a[key] = value, _a));
+            }
+            else {
+                var grid = dEl.el.gridstackNode.grid;
+                var handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles;
+                var autoHide = !grid.opts.alwaysShowResizeHandle;
+                dEl.setupResizable(__assign(__assign(__assign({}, grid.opts.resizable), { handles: handles, autoHide: autoHide }), {
+                    start: opts.start,
+                    stop: opts.stop,
+                    resize: opts.resize
+                }));
+            }
+        });
+        return this;
+    };
+    DDGridStack.prototype.draggable = function (el, opts, key, value) {
+        this._getDDElements(el).forEach(function (dEl) {
+            var _a;
+            if (opts === 'disable' || opts === 'enable') {
+                dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable()
+            }
+            else if (opts === 'destroy') {
+                dEl.ddDraggable && dEl.cleanDraggable();
+            }
+            else if (opts === 'option') {
+                dEl.setupDraggable((_a = {}, _a[key] = value, _a));
+            }
+            else {
+                var grid = dEl.el.gridstackNode.grid;
+                dEl.setupDraggable(__assign(__assign({}, grid.opts.draggable), {
+                    // containment: (grid.opts._isNested && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+                    start: opts.start,
+                    stop: opts.stop,
+                    drag: opts.drag
+                }));
+            }
+        });
+        return this;
+    };
+    DDGridStack.prototype.dragIn = function (el, opts) {
+        this._getDDElements(el).forEach(function (dEl) { return dEl.setupDraggable(opts); });
+        return this;
     };
-    /** removes any drag&drop present (called during destroy) */
-    GridStackDD.prototype.remove = function (el) {
-        this.draggable(el, 'destroy').resizable(el, 'destroy');
-        if (el.gridstackNode) {
-            delete el.gridstackNode._initDD; // reset our DD init flag
+    DDGridStack.prototype.droppable = function (el, opts, key, value) {
+        if (typeof opts.accept === 'function' && !opts._accept) {
+            opts._accept = opts.accept;
+            opts.accept = function (el) { return opts._accept(el); };
         }
+        this._getDDElements(el).forEach(function (dEl) {
+            var _a;
+            if (opts === 'disable' || opts === 'enable') {
+                dEl.ddDroppable && dEl.ddDroppable[opts]();
+            }
+            else if (opts === 'destroy') {
+                if (dEl.ddDroppable) { // error to call destroy if not there
+                    dEl.cleanDroppable();
+                }
+            }
+            else if (opts === 'option') {
+                dEl.setupDroppable((_a = {}, _a[key] = value, _a));
+            }
+            else {
+                dEl.setupDroppable(opts);
+            }
+        });
+        return this;
+    };
+    /** true if element is droppable */
+    DDGridStack.prototype.isDroppable = function (el) {
+        return !!(el && el.ddElement && el.ddElement.ddDroppable && !el.ddElement.ddDroppable.disabled);
+    };
+    /** true if element is draggable */
+    DDGridStack.prototype.isDraggable = function (el) {
+        return !!(el && el.ddElement && el.ddElement.ddDraggable && !el.ddElement.ddDraggable.disabled);
+    };
+    /** true if element is draggable */
+    DDGridStack.prototype.isResizable = function (el) {
+        return !!(el && el.ddElement && el.ddElement.ddResizable && !el.ddElement.ddResizable.disabled);
+    };
+    DDGridStack.prototype.on = function (el, name, callback) {
+        this._getDDElements(el).forEach(function (dEl) {
+            return dEl.on(name, function (event) {
+                callback(event, dd_manager_1.DDManager.dragElement ? dd_manager_1.DDManager.dragElement.el : event.target, dd_manager_1.DDManager.dragElement ? dd_manager_1.DDManager.dragElement.helper : null);
+            });
+        });
         return this;
     };
-    return GridStackDD;
-}(gridstack_ddi_1.GridStackDDI));
-exports.GridStackDD = GridStackDD;
+    DDGridStack.prototype.off = function (el, name) {
+        this._getDDElements(el).forEach(function (dEl) { return dEl.off(name); });
+        return this;
+    };
+    /** @internal returns a list of DD elements, creating them on the fly by default */
+    DDGridStack.prototype._getDDElements = function (els, create) {
+        if (create === void 0) { create = true; }
+        var hosts = utils_1.Utils.getElements(els);
+        if (!hosts.length)
+            return [];
+        var list = hosts.map(function (e) { return e.ddElement || (create ? dd_element_1.DDElement.init(e) : null); });
+        if (!create) {
+            list.filter(function (d) { return d; });
+        } // remove nulls
+        return list;
+    };
+    return DDGridStack;
+}());
+exports.DDGridStack = DDGridStack;
+/** global instance */
+var dd = new DDGridStack;
 /********************************************************************************
  * GridStack code that is doing drag&drop extracted here so main class is smaller
- * for static grid that don't do any of this work anyway. Saves about 10k.
+ * for static grid that don't do any of this work anyway. Saves about 31k (41k -> 72k)
  * https://www.typescriptlang.org/docs/handbook/declaration-merging.html
  * https://www.typescriptlang.org/docs/handbook/mixins.html
  ********************************************************************************/
@@ -68,7 +160,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
     var _this = this;
     // check if we need to disable things
     if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {
-        GridStackDD.get().droppable(this.el, 'destroy');
+        dd.droppable(this.el, 'destroy');
         return this;
     }
     // vars shared across all methods
@@ -92,7 +184,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
             if (!_this.engine.willItFit(node)) {
                 node.autoPosition = true; // ignore x,y and try for any slot...
                 if (!_this.engine.willItFit(node)) {
-                    GridStackDD.get().off(el, 'drag'); // stop calling us
+                    dd.off(el, 'drag'); // stop calling us
                     return; // full grid or can't grow
                 }
                 if (node._willFitPos) {
@@ -109,8 +201,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
             _this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);
         }
     };
-    GridStackDD.get()
-        .droppable(this.el, {
+    dd.droppable(this.el, {
         accept: function (el) {
             var 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
@@ -142,7 +233,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
          * entering our grid area
          */
         .on(this.el, 'dropover', function (event, el, helper) {
-        // TEST console.log(`over ${this.el.gridstack.opts.id} ${count++}`);
+        // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST
         var 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) {
@@ -151,7 +242,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         }
         // 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) {
-            // TEST console.log('dropover without leave');
+            // console.log('dropover without leave'); // TEST
             var otherGrid = node.grid;
             otherGrid._leave(el, helper);
         }
@@ -173,7 +264,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         // 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
-            // TEST console.log('dropover cloning node');
+            // console.log('dropover cloning node'); // TEST
             if (!el._gridstackNodeOrig)
                 el._gridstackNodeOrig = node; // shouldn't have multiple nested!
             el.gridstackNode = node = __assign(__assign({}, node), { w: w, h: h, grid: _this });
@@ -191,7 +282,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         }
         // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)
         _itemRemoving(node.el, false);
-        GridStackDD.get().on(el, 'drag', onDrag);
+        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)
@@ -200,7 +291,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
          * Leaving our grid area...
          */
         .on(this.el, 'dropout', function (event, el, helper) {
-        // TEST console.log(`out ${this.el.gridstack.opts.id} ${count++}`);
+        // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
         var node = el.gridstackNode;
         if (!node)
             return false;
@@ -222,7 +313,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         var 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
-        // TEST console.log('drop delete _gridstackNodeOrig')
+        // console.log('drop delete _gridstackNodeOrig') // TEST
         var origNode = el._gridstackNodeOrig;
         delete el._gridstackNodeOrig;
         if (wasAdded && origNode && origNode.grid && origNode.grid !== _this) {
@@ -237,7 +328,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
             _this.engine.cleanupNode(node); // removes all internal _xyz values
             node.grid = _this;
         }
-        GridStackDD.get().off(el, 'drag');
+        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) {
@@ -249,7 +340,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         }
         else {
             el.remove(); // reduce flicker as we change depth here, and size further down
-            GridStackDD.get().remove(el);
+            _this._removeDD(el);
         }
         if (!wasAdded)
             return false;
@@ -259,7 +350,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         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
+        _this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
         _this._updateContainerHeight();
         _this.engine.addedNodes.push(node); // @ts-ignore
         _this._triggerAddEvent(); // @ts-ignore
@@ -299,8 +390,8 @@ gridstack_1.GridStack.prototype._setupRemoveDrop = function () {
         // 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 (!GridStackDD.get().isDroppable(trashEl)) {
-            GridStackDD.get().droppable(trashEl, this.opts.removableOptions)
+        if (!dd.isDroppable(trashEl)) {
+            dd.droppable(trashEl, this.opts.removableOptions)
                 .on(trashEl, 'dropover', function (event, el) { return _itemRemoving(el, true); })
                 .on(trashEl, 'dropout', function (event, el) { return _itemRemoving(el, false); });
         }
@@ -316,10 +407,8 @@ gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) {
     var dragIn;
     var dragInOptions;
     var dragInDefaultOptions = {
-        revert: 'invalid',
         handle: '.grid-stack-item-content',
-        scroll: false,
-        appendTo: 'body'
+        appendTo: 'body',
     };
     // cache in the passed in values (form grid init?) so they don't have to resend them each time
     if (_dragIn) {
@@ -328,7 +417,6 @@ gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) {
     }
     if (typeof dragIn !== 'string')
         return;
-    var dd = GridStackDD.get();
     utils_1.Utils.getElements(dragIn).forEach(function (el) {
         if (!dd.isDraggable(el))
             dd.dragIn(el, dragInOptions);
@@ -338,11 +426,12 @@ gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) {
 gridstack_1.GridStack.prototype._prepareDragDropByNode = function (node) {
     var _this = this;
     var el = node.el;
-    var dd = GridStackDD.get();
+    var noMove = node.noMove || this.opts.disableDrag;
+    var noResize = node.noResize || this.opts.disableResize;
     // check for disabled grid first
-    if (this.opts.staticGrid || ((node.noMove || this.opts.disableDrag) && (node.noResize || this.opts.disableResize))) {
+    if (this.opts.staticGrid || (noMove && noResize)) {
         if (node._initDD) {
-            dd.remove(el); // nukes everything instead of just disable, will add some styles back next
+            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
@@ -381,7 +470,7 @@ gridstack_1.GridStack.prototype._prepareDragDropByNode = function (node) {
                 if (gridToNotify._gsEventHandler[event.type]) {
                     gridToNotify._gsEventHandler[event.type](event, target);
                 }
-                dd.remove(el);
+                _this._removeDD(el);
                 gridToNotify.engine.removedNodes.push(node);
                 gridToNotify._triggerRemoveEvent();
                 // break circular links and remove DOM
@@ -390,18 +479,17 @@ gridstack_1.GridStack.prototype._prepareDragDropByNode = function (node) {
                 el.remove();
             }
             else {
-                if (!node._temporaryRemoved) {
-                    // move to new placeholder location
-                    utils_1.Utils.removePositioningStyles(target); // @ts-ignore
-                    _this._writePosAttr(target, node);
-                }
-                else {
+                utils_1.Utils.removePositioningStyles(target);
+                if (node._temporaryRemoved) {
                     // got removed - restore item back to before dragging position
-                    utils_1.Utils.removePositioningStyles(target);
                     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);
                 }
@@ -424,22 +512,8 @@ gridstack_1.GridStack.prototype._prepareDragDropByNode = function (node) {
         node._initDD = true; // we've set DD support now
     }
     // finally fine tune move vs resize by disabling any part...
-    if (node.noMove || this.opts.disableDrag) {
-        dd.draggable(el, 'disable');
-        el.classList.add('ui-draggable-disabled');
-    }
-    else {
-        dd.draggable(el, 'enable');
-        el.classList.remove('ui-draggable-disabled');
-    }
-    if (node.noResize || this.opts.disableResize) {
-        dd.resizable(el, 'disable');
-        el.classList.add('ui-resizable-disabled');
-    }
-    else {
-        dd.resizable(el, 'enable');
-        el.classList.remove('ui-resizable-disabled');
-    }
+    dd.draggable(el, noMove ? 'disable' : 'enable')
+        .resizable(el, noResize ? 'disable' : 'enable');
     return this;
 };
 /** @internal called when item is starting a drag/resize */
@@ -449,22 +523,21 @@ gridstack_1.GridStack.prototype._onStartMoving = function (el, event, ui, node,
     // @ts-ignore
     this._writePosAttr(this.placeholder, node);
     this.el.appendChild(this.placeholder);
-    // TEST console.log('_onStartMoving 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) {
-        // TEST console.log('engine.addNode x=' + node.x);
+        // 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') {
-        var dd = GridStackDD.get()
-            .resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
+        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);
@@ -482,7 +555,7 @@ gridstack_1.GridStack.prototype._leave = function (el, helper) {
     var node = el.gridstackNode;
     if (!node)
         return;
-    GridStackDD.get().off(el, 'drag'); // no need to track while being outside
+    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;
@@ -495,7 +568,7 @@ gridstack_1.GridStack.prototype._leave = function (el, helper) {
     }
     // finally if item originally came from another grid, but left us, restore things back to prev info
     if (el._gridstackNodeOrig) {
-        // TEST console.log('leave delete _gridstackNodeOrig')
+        // console.log('leave delete _gridstackNodeOrig') // TEST
         el.gridstackNode = el._gridstackNodeOrig;
         delete el._gridstackNodeOrig;
     }
@@ -683,4 +756,12 @@ gridstack_1.GridStack.prototype.enableResize = function (doEnable) {
     this.engine.nodes.forEach(function (n) { return _this.resizable(n.el, doEnable); });
     return this;
 };
-//# sourceMappingURL=gridstack-dd.js.map
+/** removes any drag&drop present (called during destroy) */
+gridstack_1.GridStack.prototype._removeDD = function (el) {
+    dd.draggable(el, 'destroy').resizable(el, 'destroy');
+    if (el.gridstackNode) {
+        delete el.gridstackNode._initDD; // reset our DD init flag
+    }
+    return this;
+};
+//# sourceMappingURL=dd-gridstack.js.map