gridstack 5.1.1 → 6.0.0

package/dist/dd-droppable.js

@@ -0,0 +1,149 @@
+"use strict";
+/**
+ * dd-droppable.ts 6.0.0
+ * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DDDroppable = void 0;
+const dd_manager_1 = require("./dd-manager");
+const dd_base_impl_1 = require("./dd-base-impl");
+const utils_1 = require("./utils");
+const dd_touch_1 = require("./dd-touch");
+// let count = 0; // TEST
+class DDDroppable extends dd_base_impl_1.DDBaseImplement {
+    constructor(el, opts = {}) {
+        super();
+        this.el = el;
+        this.option = opts;
+        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+        this._mouseEnter = this._mouseEnter.bind(this);
+        this._mouseLeave = this._mouseLeave.bind(this);
+        this.enable();
+        this._setupAccept();
+    }
+    on(event, callback) {
+        super.on(event, callback);
+    }
+    off(event) {
+        super.off(event);
+    }
+    enable() {
+        if (this.disabled === false)
+            return;
+        super.enable();
+        this.el.classList.add('ui-droppable');
+        this.el.classList.remove('ui-droppable-disabled');
+        this.el.addEventListener('mouseenter', this._mouseEnter);
+        this.el.addEventListener('mouseleave', this._mouseLeave);
+        if (dd_touch_1.isTouch) {
+            this.el.addEventListener('pointerenter', dd_touch_1.pointerenter);
+            this.el.addEventListener('pointerleave', dd_touch_1.pointerleave);
+        }
+    }
+    disable(forDestroy = false) {
+        if (this.disabled === true)
+            return;
+        super.disable();
+        this.el.classList.remove('ui-droppable');
+        if (!forDestroy)
+            this.el.classList.add('ui-droppable-disabled');
+        this.el.removeEventListener('mouseenter', this._mouseEnter);
+        this.el.removeEventListener('mouseleave', this._mouseLeave);
+        if (dd_touch_1.isTouch) {
+            this.el.removeEventListener('pointerenter', dd_touch_1.pointerenter);
+            this.el.removeEventListener('pointerleave', dd_touch_1.pointerleave);
+        }
+    }
+    destroy() {
+        this.disable(true);
+        this.el.classList.remove('ui-droppable');
+        this.el.classList.remove('ui-droppable-disabled');
+        super.destroy();
+    }
+    updateOption(opts) {
+        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
+        this._setupAccept();
+        return this;
+    }
+    /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
+    _mouseEnter(e) {
+        // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
+        if (!dd_manager_1.DDManager.dragElement)
+            return;
+        if (!this._canDrop())
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
+        if (dd_manager_1.DDManager.dropElement && dd_manager_1.DDManager.dropElement !== this) {
+            dd_manager_1.DDManager.dropElement._mouseLeave(e);
+        }
+        dd_manager_1.DDManager.dropElement = this;
+        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dropover' });
+        if (this.option.over) {
+            this.option.over(ev, this._ui(dd_manager_1.DDManager.dragElement));
+        }
+        this.triggerEvent('dropover', ev);
+        this.el.classList.add('ui-droppable-over');
+        // console.log('tracking'); // TEST
+    }
+    /** @internal called when the item is leaving our area, stop tracking if we had moving item */
+    _mouseLeave(e) {
+        var _a;
+        // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
+        if (!dd_manager_1.DDManager.dragElement || dd_manager_1.DDManager.dropElement !== this)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dropout' });
+        if (this.option.out) {
+            this.option.out(ev, this._ui(dd_manager_1.DDManager.dragElement));
+        }
+        this.triggerEvent('dropout', ev);
+        if (dd_manager_1.DDManager.dropElement === this) {
+            delete dd_manager_1.DDManager.dropElement;
+            // console.log('not tracking'); // TEST
+            // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children
+            let parentDrop;
+            let parent = this.el.parentElement;
+            while (!parentDrop && parent) {
+                parentDrop = (_a = parent.ddElement) === null || _a === void 0 ? void 0 : _a.ddDroppable;
+                parent = parent.parentElement;
+            }
+            if (parentDrop) {
+                parentDrop._mouseEnter(e);
+            }
+        }
+    }
+    /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */
+    drop(e) {
+        e.preventDefault();
+        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drop' });
+        if (this.option.drop) {
+            this.option.drop(ev, this._ui(dd_manager_1.DDManager.dragElement));
+        }
+        this.triggerEvent('drop', ev);
+    }
+    /** @internal true if element matches the string/method accept option */
+    _canDrop() {
+        return dd_manager_1.DDManager.dragElement && (!this.accept || this.accept(dd_manager_1.DDManager.dragElement.el));
+    }
+    /** @internal */
+    _setupAccept() {
+        if (!this.option.accept)
+            return this;
+        if (typeof this.option.accept === 'string') {
+            this.accept = (el) => el.matches(this.option.accept);
+        }
+        else {
+            this.accept = this.option.accept;
+        }
+        return this;
+    }
+    /** @internal */
+    _ui(drag) {
+        return Object.assign({ draggable: drag.el }, drag.ui());
+    }
+}
+exports.DDDroppable = DDDroppable;
+//# sourceMappingURL=dd-droppable.js.map

package/dist/dd-droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-droppable.js","sourceRoot":"","sources":["../src/dd-droppable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-droppable.ts 6.0.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { DDDraggable } from './dd-draggable';\nimport { DDManager } from './dd-manager';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { Utils } from './utils';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, pointerenter, pointerleave } from './dd-touch';\nimport { GridHTMLElement } from './gridstack';\n\nexport interface DDDroppableOpt {\n  accept?: string | ((el: HTMLElement) => boolean);\n  drop?: (event: DragEvent, ui) => void;\n  over?: (event: DragEvent, ui) => void;\n  out?: (event: DragEvent, ui) => void;\n}\n\n// let count = 0; // TEST\n\nexport class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {\n\n  public accept: (el: HTMLElement) => boolean;\n  public el: HTMLElement;\n  public option: DDDroppableOpt;\n\n  constructor(el: HTMLElement, opts: DDDroppableOpt = {}) {\n    super();\n    this.el = el;\n    this.option = opts;\n    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n    this._mouseEnter = this._mouseEnter.bind(this);\n    this._mouseLeave = this._mouseLeave.bind(this);\n    this.enable();\n    this._setupAccept();\n  }\n\n  public on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void {\n    super.on(event, callback);\n  }\n\n  public off(event: 'drop' | 'dropover' | 'dropout'): void {\n    super.off(event);\n  }\n\n  public enable(): void {\n    if (this.disabled === false) return;\n    super.enable();\n    this.el.classList.add('ui-droppable');\n    this.el.classList.remove('ui-droppable-disabled');\n    this.el.addEventListener('mouseenter', this._mouseEnter);\n    this.el.addEventListener('mouseleave', this._mouseLeave);\n    if (isTouch) {\n      this.el.addEventListener('pointerenter', pointerenter);\n      this.el.addEventListener('pointerleave', pointerleave);\n    }\n  }\n\n  public disable(forDestroy = false): void {\n    if (this.disabled === true) return;\n    super.disable();\n    this.el.classList.remove('ui-droppable');\n    if (!forDestroy) this.el.classList.add('ui-droppable-disabled');\n    this.el.removeEventListener('mouseenter', this._mouseEnter);\n    this.el.removeEventListener('mouseleave', this._mouseLeave);\n    if (isTouch) {\n      this.el.removeEventListener('pointerenter', pointerenter);\n      this.el.removeEventListener('pointerleave', pointerleave);\n    }\n  }\n\n  public destroy(): void {\n    this.disable(true);\n    this.el.classList.remove('ui-droppable');\n    this.el.classList.remove('ui-droppable-disabled');\n    super.destroy();\n  }\n\n  public updateOption(opts: DDDroppableOpt): DDDroppable {\n    Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n    this._setupAccept();\n    return this;\n  }\n\n  /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */\n  protected _mouseEnter(e: MouseEvent): void {\n    // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST\n    if (!DDManager.dragElement) return;\n    if (!this._canDrop()) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do\n    if (DDManager.dropElement && DDManager.dropElement !== this) {\n      DDManager.dropElement._mouseLeave(e as DragEvent);\n    }\n    DDManager.dropElement = this;\n\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dropover' });\n    if (this.option.over) {\n      this.option.over(ev, this._ui(DDManager.dragElement))\n    }\n    this.triggerEvent('dropover', ev);\n    this.el.classList.add('ui-droppable-over');\n    // console.log('tracking'); // TEST\n  }\n\n  /** @internal called when the item is leaving our area, stop tracking if we had moving item */\n  protected _mouseLeave(e: MouseEvent): void {\n    // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST\n    if (!DDManager.dragElement || DDManager.dropElement !== this) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dropout' });\n    if (this.option.out) {\n      this.option.out(ev, this._ui(DDManager.dragElement))\n    }\n    this.triggerEvent('dropout', ev);\n\n    if (DDManager.dropElement === this) {\n      delete DDManager.dropElement;\n      // console.log('not tracking'); // TEST\n\n      // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children\n      let parentDrop: DDDroppable;\n      let parent: DDElementHost = this.el.parentElement;\n      while (!parentDrop && parent) {\n        parentDrop = parent.ddElement?.ddDroppable;\n        parent = parent.parentElement;\n      }\n      if (parentDrop) {\n        parentDrop._mouseEnter(e);\n      }\n    }\n  }\n\n  /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */\n  public drop(e: MouseEvent): void {\n    e.preventDefault();\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drop' });\n    if (this.option.drop) {\n      this.option.drop(ev, this._ui(DDManager.dragElement))\n    }\n    this.triggerEvent('drop', ev);\n  }\n\n  /** @internal true if element matches the string/method accept option */\n  protected _canDrop(): boolean {\n    return DDManager.dragElement && (!this.accept || this.accept(DDManager.dragElement.el));\n  }\n\n  /** @internal */\n  protected _setupAccept(): DDDroppable {\n    if (!this.option.accept) return this;\n    if (typeof this.option.accept === 'string') {\n      this.accept = (el: HTMLElement) => el.matches(this.option.accept as string);\n    } else {\n      this.accept = this.option.accept;\n    }\n    return this;\n  }\n\n  /** @internal */\n  protected _ui(drag: DDDraggable) {\n    return {\n      draggable: drag.el,\n      ...drag.ui()\n    };\n  }\n}\n\n"]}

package/dist/{h5/dd-element.d.ts → dd-element.d.ts}

@@ -1,9 +1,9 @@
 /**
- * dd-elements.ts 5.1.1
+ * dd-elements.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 import { DDResizable, DDResizableOpt } from './dd-resizable';
-import { GridItemHTMLElement } from './../types';
+import { GridItemHTMLElement } from './types';
 import { DDDraggable, DDDraggableOpt } from './dd-draggable';
 import { DDDroppable, DDDroppableOpt } from './dd-droppable';
 export interface DDElementHost extends GridItemHTMLElement {

package/dist/{h5/dd-element.js → dd-element.js}

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * dd-elements.ts 5.1.1
+ * dd-elements.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/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.0\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/dd-gridstack.d.ts

@@ -0,0 +1,36 @@
+/**
+ * dd-gridstack.ts 6.0.0
+ * 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/{gridstack-dd.js → dd-gridstack.js}

@@ -1,36 +1,137 @@
 "use strict";
 /**
- * gridstack-dd.ts 5.1.1
+ * dd-gridstack.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridStackDD = void 0;
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const gridstack_ddi_1 = require("./gridstack-ddi");
+exports.DDGridStack = void 0;
 const gridstack_1 = require("./gridstack");
 const utils_1 = require("./utils");
-// TEST let count = 0;
+const dd_manager_1 = require("./dd-manager");
+const 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.
  */
-class GridStackDD extends gridstack_ddi_1.GridStackDDI {
-    /** override to cast to correct type */
+class DDGridStack {
+    /** get the global (but static to this code) DD implementation */
     static get() {
-        return gridstack_ddi_1.GridStackDDI.get();
+        return dd;
     }
-    /** removes any drag&drop present (called during destroy) */
-    remove(el) {
-        this.draggable(el, 'destroy').resizable(el, 'destroy');
-        if (el.gridstackNode) {
-            delete el.gridstackNode._initDD; // reset our DD init flag
+    resizable(el, opts, key, value) {
+        this._getDDElements(el).forEach(dEl => {
+            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({ [key]: value });
+            }
+            else {
+                const grid = dEl.el.gridstackNode.grid;
+                let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles;
+                let autoHide = !grid.opts.alwaysShowResizeHandle;
+                dEl.setupResizable(Object.assign(Object.assign(Object.assign({}, grid.opts.resizable), { handles, autoHide }), {
+                    start: opts.start,
+                    stop: opts.stop,
+                    resize: opts.resize
+                }));
+            }
+        });
+        return this;
+    }
+    draggable(el, opts, key, value) {
+        this._getDDElements(el).forEach(dEl => {
+            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({ [key]: value });
+            }
+            else {
+                const grid = dEl.el.gridstackNode.grid;
+                dEl.setupDraggable(Object.assign(Object.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;
+    }
+    dragIn(el, opts) {
+        this._getDDElements(el).forEach(dEl => dEl.setupDraggable(opts));
+        return this;
+    }
+    droppable(el, opts, key, value) {
+        if (typeof opts.accept === 'function' && !opts._accept) {
+            opts._accept = opts.accept;
+            opts.accept = (el) => opts._accept(el);
         }
+        this._getDDElements(el).forEach(dEl => {
+            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({ [key]: value });
+            }
+            else {
+                dEl.setupDroppable(opts);
+            }
+        });
         return this;
     }
+    /** true if element is droppable */
+    isDroppable(el) {
+        return !!(el && el.ddElement && el.ddElement.ddDroppable && !el.ddElement.ddDroppable.disabled);
+    }
+    /** true if element is draggable */
+    isDraggable(el) {
+        return !!(el && el.ddElement && el.ddElement.ddDraggable && !el.ddElement.ddDraggable.disabled);
+    }
+    /** true if element is draggable */
+    isResizable(el) {
+        return !!(el && el.ddElement && el.ddElement.ddResizable && !el.ddElement.ddResizable.disabled);
+    }
+    on(el, name, callback) {
+        this._getDDElements(el).forEach(dEl => dEl.on(name, (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;
+    }
+    off(el, name) {
+        this._getDDElements(el).forEach(dEl => dEl.off(name));
+        return this;
+    }
+    /** @internal returns a list of DD elements, creating them on the fly by default */
+    _getDDElements(els, create = true) {
+        let hosts = utils_1.Utils.getElements(els);
+        if (!hosts.length)
+            return [];
+        let list = hosts.map(e => e.ddElement || (create ? dd_element_1.DDElement.init(e) : null));
+        if (!create) {
+            list.filter(d => d);
+        } // remove nulls
+        return list;
+    }
 }
-exports.GridStackDD = GridStackDD;
+exports.DDGridStack = DDGridStack;
+/** global instance */
+const 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
  ********************************************************************************/
@@ -38,7 +139,7 @@ exports.GridStackDD = GridStackDD;
 gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
     // 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
@@ -62,7 +163,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) {
@@ -79,8 +180,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: (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
@@ -112,7 +212,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
          * entering our grid area
          */
         .on(this.el, 'dropover', (event, el, helper) => {
-        // TEST console.log(`over ${this.el.gridstack.opts.id} ${count++}`);
+        // 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) {
@@ -121,7 +221,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
             let otherGrid = node.grid;
             otherGrid._leave(el, helper);
         }
@@ -143,7 +243,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 = Object.assign(Object.assign({}, node), { w, h, grid: this });
@@ -161,7 +261,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)
@@ -170,7 +270,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
          * Leaving our grid area...
          */
         .on(this.el, 'dropout', (event, el, helper) => {
-        // TEST console.log(`out ${this.el.gridstack.opts.id} ${count++}`);
+        // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST
         let node = el.gridstackNode;
         if (!node)
             return false;
@@ -192,7 +292,7 @@ gridstack_1.GridStack.prototype._setupAcceptWidget = function () {
         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
-        // TEST console.log('drop delete _gridstackNodeOrig')
+        // console.log('drop delete _gridstackNodeOrig') // TEST
         let origNode = el._gridstackNodeOrig;
         delete el._gridstackNodeOrig;
         if (wasAdded && origNode && origNode.grid && origNode.grid !== this) {
@@ -207,7 +307,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) {
@@ -219,7 +319,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;
@@ -229,7 +329,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
@@ -269,8 +369,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', (event, el) => _itemRemoving(el, true))
                 .on(trashEl, 'dropout', (event, el) => _itemRemoving(el, false));
         }
@@ -286,10 +386,8 @@ gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) {
     let dragIn;
     let dragInOptions;
     const 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) {
@@ -298,7 +396,6 @@ gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) {
     }
     if (typeof dragIn !== 'string')
         return;
-    let dd = GridStackDD.get();
     utils_1.Utils.getElements(dragIn).forEach(el => {
         if (!dd.isDraggable(el))
             dd.dragIn(el, dragInOptions);
@@ -307,11 +404,10 @@ gridstack_1.GridStack.setupDragIn = function (_dragIn, _dragInOptions) {
 /** @internal prepares the element for drag&drop **/
 gridstack_1.GridStack.prototype._prepareDragDropByNode = function (node) {
     let el = node.el;
-    let dd = GridStackDD.get();
     // check for disabled grid first
     if (this.opts.staticGrid || ((node.noMove || this.opts.disableDrag) && (node.noResize || this.opts.disableResize))) {
         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
@@ -350,7 +446,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
@@ -359,18 +455,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);
                 }
@@ -418,22 +513,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') {
-        let 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);
@@ -451,7 +545,7 @@ gridstack_1.GridStack.prototype._leave = function (el, helper) {
     let 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;
@@ -464,7 +558,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;
     }
@@ -648,4 +742,12 @@ gridstack_1.GridStack.prototype.enableResize = function (doEnable) {
     this.engine.nodes.forEach(n => 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