gridstack 4.3.1 → 4.4.0

package/dist/es5/h5/dd-draggable.js

@@ -0,0 +1,319 @@
+"use strict";
+/**
+ * dd-draggable.ts 4.4.0
+ * 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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DDDraggable = void 0;
+var dd_manager_1 = require("./dd-manager");
+var dd_utils_1 = require("./dd-utils");
+var dd_base_impl_1 = require("./dd-base-impl");
+var DDDraggable = /** @class */ (function (_super) {
+    __extends(DDDraggable, _super);
+    function DDDraggable(el, option) {
+        if (option === void 0) { option = {}; }
+        var _this = _super.call(this) || this;
+        /** @internal */
+        _this.dragging = false;
+        /** @internal TODO: set to public as called by DDDroppable! */
+        _this.ui = function () {
+            var containmentEl = _this.el.parentElement;
+            var containmentRect = containmentEl.getBoundingClientRect();
+            var offset = _this.helper.getBoundingClientRect();
+            return {
+                position: {
+                    top: offset.top - containmentRect.top,
+                    left: offset.left - containmentRect.left
+                }
+                /* not used by GridStack for now...
+                helper: [this.helper], //The object arr representing the helper that's being dragged.
+                offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
+                */
+            };
+        };
+        _this.el = el;
+        _this.option = option;
+        // get the element that is actually supposed to be dragged by
+        var className = option.handle.substring(1);
+        _this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;
+        // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
+        _this._dragStart = _this._dragStart.bind(_this);
+        _this._drag = _this._drag.bind(_this);
+        _this._dragEnd = _this._dragEnd.bind(_this);
+        _this.enable();
+        return _this;
+    }
+    DDDraggable.prototype.on = function (event, callback) {
+        _super.prototype.on.call(this, event, callback);
+    };
+    DDDraggable.prototype.off = function (event) {
+        _super.prototype.off.call(this, event);
+    };
+    DDDraggable.prototype.enable = function () {
+        _super.prototype.enable.call(this);
+        this.dragEl.draggable = true;
+        this.dragEl.addEventListener('dragstart', this._dragStart);
+        this.el.classList.remove('ui-draggable-disabled');
+        this.el.classList.add('ui-draggable');
+    };
+    DDDraggable.prototype.disable = function (forDestroy) {
+        if (forDestroy === void 0) { forDestroy = false; }
+        _super.prototype.disable.call(this);
+        this.dragEl.removeAttribute('draggable');
+        this.dragEl.removeEventListener('dragstart', this._dragStart);
+        this.el.classList.remove('ui-draggable');
+        if (!forDestroy)
+            this.el.classList.add('ui-draggable-disabled');
+    };
+    DDDraggable.prototype.destroy = function () {
+        if (this.dragging) {
+            // Destroy while dragging should remove dragend listener and manually trigger
+            // dragend, otherwise dragEnd can't perform dragstop because eventRegistry is
+            // destroyed.
+            this._dragEnd({});
+        }
+        this.disable(true);
+        delete this.el;
+        delete this.helper;
+        delete this.option;
+        _super.prototype.destroy.call(this);
+    };
+    DDDraggable.prototype.updateOption = function (opts) {
+        var _this = this;
+        Object.keys(opts).forEach(function (key) { return _this.option[key] = opts[key]; });
+        return this;
+    };
+    /** @internal */
+    DDDraggable.prototype._dragStart = function (event) {
+        var _this = this;
+        dd_manager_1.DDManager.dragElement = this;
+        this.helper = this._createHelper(event);
+        this._setupHelperContainmentStyle();
+        this.dragOffset = this._getDragOffset(event, this.el, this.helperContainment);
+        var ev = dd_utils_1.DDUtils.initEvent(event, { target: this.el, type: 'dragstart' });
+        if (this.helper !== this.el) {
+            this._setupDragFollowNodeNotifyStart(ev);
+            // immediately set external helper initial position to avoid flickering behavior and unnecessary looping in `_packNodes()`
+            this._dragFollow(event);
+        }
+        else {
+            this.dragFollowTimer = window.setTimeout(function () {
+                delete _this.dragFollowTimer;
+                _this._setupDragFollowNodeNotifyStart(ev);
+            }, 0);
+        }
+        this._cancelDragGhost(event);
+    };
+    /** @internal */
+    DDDraggable.prototype._setupDragFollowNodeNotifyStart = function (ev) {
+        this._setupHelperStyle();
+        document.addEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);
+        this.dragEl.addEventListener('dragend', this._dragEnd);
+        if (this.option.start) {
+            this.option.start(ev, this.ui());
+        }
+        this.dragging = true;
+        this.helper.classList.add('ui-draggable-dragging');
+        this.triggerEvent('dragstart', ev);
+        return this;
+    };
+    /** @internal */
+    DDDraggable.prototype._drag = function (event) {
+        // Safari: prevent default to allow drop to happen instead of reverting back (with animation) and delaying dragend #1541
+        // https://stackoverflow.com/questions/61760755/how-to-fire-dragend-event-immediately
+        event.preventDefault();
+        this._dragFollow(event);
+        var ev = dd_utils_1.DDUtils.initEvent(event, { target: this.el, type: 'drag' });
+        if (this.option.drag) {
+            this.option.drag(ev, this.ui());
+        }
+        this.triggerEvent('drag', ev);
+    };
+    /** @internal */
+    DDDraggable.prototype._dragEnd = function (event) {
+        if (this.dragFollowTimer) {
+            clearTimeout(this.dragFollowTimer);
+            delete this.dragFollowTimer;
+            return;
+        }
+        else {
+            if (this.paintTimer) {
+                cancelAnimationFrame(this.paintTimer);
+            }
+            document.removeEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);
+            this.dragEl.removeEventListener('dragend', this._dragEnd);
+        }
+        this.dragging = false;
+        this.helper.classList.remove('ui-draggable-dragging');
+        this.helperContainment.style.position = this.parentOriginStylePosition || null;
+        if (this.helper === this.el) {
+            this._removeHelperStyle();
+        }
+        else {
+            this.helper.remove();
+        }
+        var ev = dd_utils_1.DDUtils.initEvent(event, { target: this.el, type: 'dragstop' });
+        if (this.option.stop) {
+            this.option.stop(ev); // Note: ui() not used by gridstack so don't pass
+        }
+        this.triggerEvent('dragstop', ev);
+        delete dd_manager_1.DDManager.dragElement;
+        delete this.helper;
+    };
+    /** @internal create a clone copy (or user defined method) of the original drag item if set */
+    DDDraggable.prototype._createHelper = function (event) {
+        var _this = this;
+        var helper = this.el;
+        if (typeof this.option.helper === 'function') {
+            helper = this.option.helper(event);
+        }
+        else if (this.option.helper === 'clone') {
+            helper = dd_utils_1.DDUtils.clone(this.el);
+        }
+        if (!document.body.contains(helper)) {
+            dd_utils_1.DDUtils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);
+        }
+        if (helper === this.el) {
+            this.dragElementOriginStyle = DDDraggable.originStyleProp.map(function (prop) { return _this.el.style[prop]; });
+        }
+        return helper;
+    };
+    /** @internal */
+    DDDraggable.prototype._setupHelperStyle = function () {
+        var _this = this;
+        this.helper.style.pointerEvents = 'none';
+        this.helper.style.width = this.dragOffset.width + 'px';
+        this.helper.style.height = this.dragOffset.height + 'px';
+        this.helper.style.willChange = 'left, top';
+        this.helper.style.transition = 'none'; // show up instantly
+        this.helper.style.position = this.option.basePosition || DDDraggable.basePosition;
+        this.helper.style.zIndex = '1000';
+        setTimeout(function () {
+            if (_this.helper) {
+                _this.helper.style.transition = null; // recover animation
+            }
+        }, 0);
+        return this;
+    };
+    /** @internal */
+    DDDraggable.prototype._removeHelperStyle = function () {
+        var _this = this;
+        // don't bother restoring styles if we're gonna remove anyway...
+        var node = this.helper ? this.helper.gridstackNode : undefined;
+        if (!node || !node._isAboutToRemove) {
+            DDDraggable.originStyleProp.forEach(function (prop) {
+                _this.helper.style[prop] = _this.dragElementOriginStyle[prop] || null;
+            });
+        }
+        delete this.dragElementOriginStyle;
+        return this;
+    };
+    /** @internal */
+    DDDraggable.prototype._dragFollow = function (event) {
+        var _this = this;
+        if (this.paintTimer) {
+            cancelAnimationFrame(this.paintTimer);
+        }
+        this.paintTimer = requestAnimationFrame(function () {
+            delete _this.paintTimer;
+            var offset = _this.dragOffset;
+            var containmentRect = { left: 0, top: 0 };
+            if (_this.helper.style.position === 'absolute') {
+                var _a = _this.helperContainment.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
+                containmentRect = { left: left, top: top_1 };
+            }
+            _this.helper.style.left = event.clientX + offset.offsetLeft - containmentRect.left + 'px';
+            _this.helper.style.top = event.clientY + offset.offsetTop - containmentRect.top + 'px';
+        });
+    };
+    /** @internal */
+    DDDraggable.prototype._setupHelperContainmentStyle = function () {
+        this.helperContainment = this.helper.parentElement;
+        if (this.option.basePosition !== 'fixed') {
+            this.parentOriginStylePosition = this.helperContainment.style.position;
+            if (window.getComputedStyle(this.helperContainment).position.match(/static/)) {
+                this.helperContainment.style.position = 'relative';
+            }
+        }
+        return this;
+    };
+    /** @internal prevent the default gost image to be created (which has wrongas we move the helper/element instead
+     * (legacy jquery UI code updates the top/left of the item).
+     * TODO: maybe use mouse event instead of HTML5 drag as we have to work around it anyway, or change code to not update
+     * the actual grid-item but move the gost image around (and special case jq version) ?
+     **/
+    DDDraggable.prototype._cancelDragGhost = function (e) {
+        /* doesn't seem to do anything...
+        let t = e.dataTransfer;
+        t.effectAllowed = 'none';
+        t.dropEffect = 'none';
+        t.setData('text', '');
+        */
+        // NOTE: according to spec (and required by Safari see #1540) the image has to be visible in the browser (in dom and not hidden) so make it a 1px div
+        var img = document.createElement('div');
+        img.style.width = '1px';
+        img.style.height = '1px';
+        img.style.position = 'fixed'; // prevent unwanted scrollbar
+        document.body.appendChild(img);
+        e.dataTransfer.setDragImage(img, 0, 0);
+        setTimeout(function () { return document.body.removeChild(img); }); // nuke once drag had a chance to grab this 'image'
+        e.stopPropagation();
+        return this;
+    };
+    /** @internal */
+    DDDraggable.prototype._getDragOffset = function (event, el, parent) {
+        // in case ancestor has transform/perspective css properties that change the viewpoint
+        var xformOffsetX = 0;
+        var xformOffsetY = 0;
+        if (parent) {
+            var testEl = document.createElement('div');
+            dd_utils_1.DDUtils.addElStyles(testEl, {
+                opacity: '0',
+                position: 'fixed',
+                top: 0 + 'px',
+                left: 0 + 'px',
+                width: '1px',
+                height: '1px',
+                zIndex: '-999999',
+            });
+            parent.appendChild(testEl);
+            var testElPosition = testEl.getBoundingClientRect();
+            parent.removeChild(testEl);
+            xformOffsetX = testElPosition.left;
+            xformOffsetY = testElPosition.top;
+            // TODO: scale ?
+        }
+        var targetOffset = el.getBoundingClientRect();
+        return {
+            left: targetOffset.left,
+            top: targetOffset.top,
+            offsetLeft: -event.clientX + targetOffset.left - xformOffsetX,
+            offsetTop: -event.clientY + targetOffset.top - xformOffsetY,
+            width: targetOffset.width,
+            height: targetOffset.height
+        };
+    };
+    /** @internal */
+    DDDraggable.basePosition = 'absolute';
+    /** @internal #1541 can't have {passive: true} on Safari as otherwise it reverts animate back to old location on drop */
+    DDDraggable.dragEventListenerOption = true; // DDUtils.isEventSupportPassiveOption ? { capture: true, passive: true } : true;
+    /** @internal */
+    DDDraggable.originStyleProp = ['transition', 'pointerEvents', 'position',
+        'left', 'top', 'opacity', 'zIndex', 'width', 'height', 'willChange'];
+    return DDDraggable;
+}(dd_base_impl_1.DDBaseImplement));
+exports.DDDraggable = DDDraggable;
+//# sourceMappingURL=dd-draggable.js.map

package/dist/es5/h5/dd-draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../../../src/h5/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 4.4.0\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\nimport { DDUtils } from './dd-utils';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { GridItemHTMLElement, DDUIData } from '../types';\n\n// TODO: merge with DDDragOpt ?\nexport interface DDDraggableOpt {\n  appendTo?: string | HTMLElement;\n  containment?: string | HTMLElement; // TODO: not implemented yet\n  handle?: string;\n  revert?: string | boolean | unknown; // TODO: not implemented yet\n  scroll?: boolean; // nature support by HTML5 drag drop, can't be switch to off actually\n  helper?: string | HTMLElement | ((event: Event) => HTMLElement);\n  basePosition?: 'fixed' | 'absolute';\n  start?: (event: Event, ui: DDUIData) => void;\n  stop?: (event: Event) => void;\n  drag?: (event: Event, ui: DDUIData) => void;\n}\n\ninterface DragOffset {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  offsetLeft: number;\n  offsetTop: number;\n}\n\nexport class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {\n  public el: HTMLElement;\n  public option: DDDraggableOpt;\n  public helper: HTMLElement; // used by GridStackDDNative\n\n  /** @internal */\n  private dragOffset: DragOffset;\n  /** @internal */\n  private dragElementOriginStyle: Array<string>;\n  /** @internal */\n  private dragFollowTimer: number;\n  /** @internal */\n  private dragEl: HTMLElement;\n  /** @internal */\n  private dragging = false;\n  /** @internal */\n  private paintTimer: number;\n  /** @internal */\n  private parentOriginStylePosition: string;\n  /** @internal */\n  private helperContainment: HTMLElement;\n  /** @internal */\n  private static basePosition: 'fixed' | 'absolute' = 'absolute';\n  /** @internal #1541 can't have {passive: true} on Safari as otherwise it reverts animate back to old location on drop */\n  private static dragEventListenerOption = true; // DDUtils.isEventSupportPassiveOption ? { capture: true, passive: true } : true;\n  /** @internal */\n  private static originStyleProp = ['transition', 'pointerEvents', 'position',\n    'left', 'top', 'opacity', 'zIndex', 'width', 'height', 'willChange'];\n\n  constructor(el: HTMLElement, option: DDDraggableOpt = {}) {\n    super();\n    this.el = el;\n    this.option = option;\n    // get the element that is actually supposed to be dragged by\n    let className = option.handle.substring(1);\n    this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;\n    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n    this._dragStart = this._dragStart.bind(this);\n    this._drag = this._drag.bind(this);\n    this._dragEnd = this._dragEnd.bind(this);\n    this.enable();\n  }\n\n  public on(event: 'drag' | 'dragstart' | 'dragstop', callback: (event: DragEvent) => void): void {\n    super.on(event, callback);\n  }\n\n  public off(event: 'drag' | 'dragstart' | 'dragstop'): void {\n    super.off(event);\n  }\n\n  public enable(): void {\n    super.enable();\n    this.dragEl.draggable = true;\n    this.dragEl.addEventListener('dragstart', this._dragStart);\n    this.el.classList.remove('ui-draggable-disabled');\n    this.el.classList.add('ui-draggable');\n  }\n\n  public disable(forDestroy = false): void {\n    super.disable();\n    this.dragEl.removeAttribute('draggable');\n    this.dragEl.removeEventListener('dragstart', this._dragStart);\n    this.el.classList.remove('ui-draggable');\n    if (!forDestroy) this.el.classList.add('ui-draggable-disabled');\n  }\n\n  public destroy(): void {\n    if (this.dragging) {\n      // Destroy while dragging should remove dragend listener and manually trigger\n      // dragend, otherwise dragEnd can't perform dragstop because eventRegistry is\n      // destroyed.\n      this._dragEnd({} as DragEvent);\n    }\n    this.disable(true);\n    delete this.el;\n    delete this.helper;\n    delete this.option;\n    super.destroy();\n  }\n\n  public updateOption(opts: DDDraggableOpt): DDDraggable {\n    Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n    return this;\n  }\n\n  /** @internal */\n  private _dragStart(event: DragEvent): void {\n    DDManager.dragElement = this;\n    this.helper = this._createHelper(event);\n    this._setupHelperContainmentStyle();\n    this.dragOffset = this._getDragOffset(event, this.el, this.helperContainment);\n    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dragstart' });\n    if (this.helper !== this.el) {\n      this._setupDragFollowNodeNotifyStart(ev);\n      // immediately set external helper initial position to avoid flickering behavior and unnecessary looping in `_packNodes()`\n      this._dragFollow(event);\n    } else {\n      this.dragFollowTimer = window.setTimeout(() => {\n        delete this.dragFollowTimer;\n        this._setupDragFollowNodeNotifyStart(ev);\n      }, 0);\n    }\n    this._cancelDragGhost(event);\n  }\n\n  /** @internal */\n  private _setupDragFollowNodeNotifyStart(ev: Event): DDDraggable {\n    this._setupHelperStyle();\n    document.addEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);\n    this.dragEl.addEventListener('dragend', this._dragEnd);\n    if (this.option.start) {\n      this.option.start(ev, this.ui());\n    }\n    this.dragging = true;\n    this.helper.classList.add('ui-draggable-dragging');\n    this.triggerEvent('dragstart', ev);\n    return this;\n  }\n\n  /** @internal */\n  private _drag(event: DragEvent): void {\n    // Safari: prevent default to allow drop to happen instead of reverting back (with animation) and delaying dragend #1541\n    // https://stackoverflow.com/questions/61760755/how-to-fire-dragend-event-immediately\n    event.preventDefault();\n    this._dragFollow(event);\n    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'drag' });\n    if (this.option.drag) {\n      this.option.drag(ev, this.ui());\n    }\n    this.triggerEvent('drag', ev);\n  }\n\n  /** @internal */\n  private _dragEnd(event: DragEvent): void {\n    if (this.dragFollowTimer) {\n      clearTimeout(this.dragFollowTimer);\n      delete this.dragFollowTimer;\n      return;\n    } else {\n      if (this.paintTimer) {\n        cancelAnimationFrame(this.paintTimer);\n      }\n      document.removeEventListener('dragover', this._drag, DDDraggable.dragEventListenerOption);\n      this.dragEl.removeEventListener('dragend', this._dragEnd);\n    }\n    this.dragging = false;\n    this.helper.classList.remove('ui-draggable-dragging');\n    this.helperContainment.style.position = this.parentOriginStylePosition || null;\n    if (this.helper === this.el) {\n      this._removeHelperStyle();\n    } else {\n      this.helper.remove();\n    }\n    const ev = DDUtils.initEvent<DragEvent>(event, { target: this.el, type: 'dragstop' });\n    if (this.option.stop) {\n      this.option.stop(ev); // Note: ui() not used by gridstack so don't pass\n    }\n    this.triggerEvent('dragstop', ev);\n    delete DDManager.dragElement;\n    delete this.helper;\n  }\n\n  /** @internal create a clone copy (or user defined method) of the original drag item if set */\n  private _createHelper(event: DragEvent): HTMLElement {\n    let helper = this.el;\n    if (typeof this.option.helper === 'function') {\n      helper = this.option.helper(event);\n    } else if (this.option.helper === 'clone') {\n      helper = DDUtils.clone(this.el);\n    }\n    if (!document.body.contains(helper)) {\n      DDUtils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);\n    }\n    if (helper === this.el) {\n      this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n    }\n    return helper;\n  }\n\n  /** @internal */\n  private _setupHelperStyle(): DDDraggable {\n    this.helper.style.pointerEvents = 'none';\n    this.helper.style.width = this.dragOffset.width + 'px';\n    this.helper.style.height = this.dragOffset.height + 'px';\n    this.helper.style.willChange = 'left, top';\n    this.helper.style.transition = 'none'; // show up instantly\n    this.helper.style.position = this.option.basePosition || DDDraggable.basePosition;\n    this.helper.style.zIndex = '1000';\n    setTimeout(() => {\n      if (this.helper) {\n        this.helper.style.transition = null; // recover animation\n      }\n    }, 0);\n    return this;\n  }\n\n  /** @internal */\n  private _removeHelperStyle(): DDDraggable {\n    // don't bother restoring styles if we're gonna remove anyway...\n    let node = this.helper ? (this.helper as GridItemHTMLElement).gridstackNode : undefined;\n    if (!node || !node._isAboutToRemove) {\n      DDDraggable.originStyleProp.forEach(prop => {\n        this.helper.style[prop] = this.dragElementOriginStyle[prop] || null;\n      });\n    }\n    delete this.dragElementOriginStyle;\n    return this;\n  }\n\n  /** @internal */\n  private _dragFollow(event: DragEvent): void {\n    if (this.paintTimer) {\n      cancelAnimationFrame(this.paintTimer);\n    }\n    this.paintTimer = requestAnimationFrame(() => {\n      delete this.paintTimer;\n      const offset = this.dragOffset;\n      let containmentRect = { left: 0, top: 0 };\n      if (this.helper.style.position === 'absolute') {\n        const { left, top } = this.helperContainment.getBoundingClientRect();\n        containmentRect = { left, top };\n      }\n      this.helper.style.left = event.clientX + offset.offsetLeft - containmentRect.left + 'px';\n      this.helper.style.top = event.clientY + offset.offsetTop - containmentRect.top + 'px';\n    });\n  }\n\n  /** @internal */\n  private _setupHelperContainmentStyle(): DDDraggable {\n    this.helperContainment = this.helper.parentElement;\n    if (this.option.basePosition !== 'fixed') {\n      this.parentOriginStylePosition = this.helperContainment.style.position;\n      if (window.getComputedStyle(this.helperContainment).position.match(/static/)) {\n        this.helperContainment.style.position = 'relative';\n      }\n    }\n    return this;\n  }\n\n  /** @internal prevent the default gost image to be created (which has wrongas we move the helper/element instead\n   * (legacy jquery UI code updates the top/left of the item).\n   * TODO: maybe use mouse event instead of HTML5 drag as we have to work around it anyway, or change code to not update\n   * the actual grid-item but move the gost image around (and special case jq version) ?\n   **/\n  private _cancelDragGhost(e: DragEvent): DDDraggable {\n    /* doesn't seem to do anything...\n    let t = e.dataTransfer;\n    t.effectAllowed = 'none';\n    t.dropEffect = 'none';\n    t.setData('text', '');\n    */\n\n    // NOTE: according to spec (and required by Safari see #1540) the image has to be visible in the browser (in dom and not hidden) so make it a 1px div\n    let img = document.createElement('div');\n    img.style.width = '1px';\n    img.style.height = '1px';\n    img.style.position = 'fixed'; // prevent unwanted scrollbar\n    document.body.appendChild(img);\n    e.dataTransfer.setDragImage(img, 0, 0);\n    setTimeout(() => document.body.removeChild(img)); // nuke once drag had a chance to grab this 'image'\n\n    e.stopPropagation();\n    return this;\n  }\n\n  /** @internal */\n  private _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {\n\n    // in case ancestor has transform/perspective css properties that change the viewpoint\n    let xformOffsetX = 0;\n    let xformOffsetY = 0;\n    if (parent) {\n      const testEl = document.createElement('div');\n      DDUtils.addElStyles(testEl, {\n        opacity: '0',\n        position: 'fixed',\n        top: 0 + 'px',\n        left: 0 + 'px',\n        width: '1px',\n        height: '1px',\n        zIndex: '-999999',\n      });\n      parent.appendChild(testEl);\n      const testElPosition = testEl.getBoundingClientRect();\n      parent.removeChild(testEl);\n      xformOffsetX = testElPosition.left;\n      xformOffsetY = testElPosition.top;\n      // TODO: scale ?\n    }\n\n    const targetOffset = el.getBoundingClientRect();\n    return {\n      left: targetOffset.left,\n      top: targetOffset.top,\n      offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,\n      offsetTop: - event.clientY + targetOffset.top - xformOffsetY,\n      width: targetOffset.width,\n      height: targetOffset.height\n    };\n  }\n\n  /** @internal TODO: set to public as called by DDDroppable! */\n  public ui = (): DDUIData => {\n    const containmentEl = this.el.parentElement;\n    const containmentRect = containmentEl.getBoundingClientRect();\n    const offset = this.helper.getBoundingClientRect();\n    return {\n      position: { //Current CSS position of the helper as { top, left } object\n        top: offset.top - containmentRect.top,\n        left: offset.left - containmentRect.left\n      }\n      /* not used by GridStack for now...\n      helper: [this.helper], //The object arr representing the helper that's being dragged.\n      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.\n      */\n    };\n  }\n}\n\n\n"]}

package/dist/es5/h5/dd-droppable.d.ts

@@ -0,0 +1,23 @@
+/**
+ * dd-droppable.ts 4.4.0
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ */
+import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
+export interface DDDroppableOpt {
+    accept?: string | ((el: HTMLElement) => boolean);
+    drop?: (event: DragEvent, ui: any) => void;
+    over?: (event: DragEvent, ui: any) => void;
+    out?: (event: DragEvent, ui: any) => void;
+}
+export declare class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt<DDDroppableOpt> {
+    accept: (el: HTMLElement) => boolean;
+    el: HTMLElement;
+    option: DDDroppableOpt;
+    constructor(el: HTMLElement, opts?: DDDroppableOpt);
+    on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void;
+    off(event: 'drop' | 'dropover' | 'dropout'): void;
+    enable(): void;
+    disable(forDestroy?: boolean): void;
+    destroy(): void;
+    updateOption(opts: DDDroppableOpt): DDDroppable;
+}

package/dist/es5/h5/dd-droppable.js

@@ -0,0 +1,182 @@
+"use strict";
+/**
+ * dd-droppable.ts 4.4.0
+ * 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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DDDroppable = void 0;
+var dd_manager_1 = require("./dd-manager");
+var dd_base_impl_1 = require("./dd-base-impl");
+var dd_utils_1 = require("./dd-utils");
+var DDDroppable = /** @class */ (function (_super) {
+    __extends(DDDroppable, _super);
+    function DDDroppable(el, opts) {
+        if (opts === void 0) { opts = {}; }
+        var _this = _super.call(this) || this;
+        _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._dragEnter = _this._dragEnter.bind(_this);
+        _this._dragOver = _this._dragOver.bind(_this);
+        _this._dragLeave = _this._dragLeave.bind(_this);
+        _this._drop = _this._drop.bind(_this);
+        _this.el.classList.add('ui-droppable');
+        _this.el.addEventListener('dragenter', _this._dragEnter);
+        _this._setupAccept();
+        return _this;
+    }
+    DDDroppable.prototype.on = function (event, callback) {
+        _super.prototype.on.call(this, event, callback);
+    };
+    DDDroppable.prototype.off = function (event) {
+        _super.prototype.off.call(this, event);
+    };
+    DDDroppable.prototype.enable = function () {
+        if (!this.disabled)
+            return;
+        _super.prototype.enable.call(this);
+        this.el.classList.remove('ui-droppable-disabled');
+        this.el.addEventListener('dragenter', this._dragEnter);
+    };
+    DDDroppable.prototype.disable = function (forDestroy) {
+        if (forDestroy === void 0) { forDestroy = false; }
+        if (this.disabled)
+            return;
+        _super.prototype.disable.call(this);
+        if (!forDestroy)
+            this.el.classList.add('ui-droppable-disabled');
+        this.el.removeEventListener('dragenter', this._dragEnter);
+    };
+    DDDroppable.prototype.destroy = function () {
+        if (this.moving) {
+            this._removeLeaveCallbacks();
+        }
+        this.disable(true);
+        this.el.classList.remove('ui-droppable');
+        this.el.classList.remove('ui-droppable-disabled');
+        delete this.moving;
+        _super.prototype.destroy.call(this);
+    };
+    DDDroppable.prototype.updateOption = function (opts) {
+        var _this = this;
+        Object.keys(opts).forEach(function (key) { return _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 */
+    DDDroppable.prototype._dragEnter = function (event) {
+        if (!this._canDrop())
+            return;
+        event.preventDefault();
+        if (this.moving)
+            return; // ignore multiple 'dragenter' as we go over existing items
+        this.moving = true;
+        var ev = dd_utils_1.DDUtils.initEvent(event, { 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.addEventListener('dragover', this._dragOver);
+        this.el.addEventListener('drop', this._drop);
+        this.el.addEventListener('dragleave', this._dragLeave);
+        this.el.classList.add('ui-droppable-over');
+    };
+    /** @internal called when an moving to drop item is being dragged over - do nothing but eat the event */
+    DDDroppable.prototype._dragOver = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    /** @internal called when the item is leaving our area, stop tracking if we had moving item */
+    DDDroppable.prototype._dragLeave = function (event) {
+        // ignore leave events on our children (get when starting to drag our items)
+        // Note: Safari Mac has null relatedTarget which causes #1684 so check if DragEvent is inside the grid instead
+        if (!event.relatedTarget) {
+            var _a = this.el.getBoundingClientRect(), bottom = _a.bottom, left = _a.left, right = _a.right, top_1 = _a.top;
+            if (event.x < right && event.x > left && event.y < bottom && event.y > top_1)
+                return;
+        }
+        else if (this.el.contains(event.relatedTarget))
+            return;
+        this._removeLeaveCallbacks();
+        if (this.moving) {
+            event.preventDefault();
+            var ev = dd_utils_1.DDUtils.initEvent(event, { target: this.el, type: 'dropout' });
+            if (this.option.out) {
+                this.option.out(ev, this._ui(dd_manager_1.DDManager.dragElement));
+            }
+            this.triggerEvent('dropout', ev);
+        }
+        delete this.moving;
+    };
+    /** @internal item is being dropped on us - call the client drop event */
+    DDDroppable.prototype._drop = function (event) {
+        if (!this.moving)
+            return; // should not have received event...
+        event.preventDefault();
+        var ev = dd_utils_1.DDUtils.initEvent(event, { target: this.el, type: 'drop' });
+        if (this.option.drop) {
+            this.option.drop(ev, this._ui(dd_manager_1.DDManager.dragElement));
+        }
+        this.triggerEvent('drop', ev);
+        this._removeLeaveCallbacks();
+        delete this.moving;
+    };
+    /** @internal called to remove callbacks when leaving or dropping */
+    DDDroppable.prototype._removeLeaveCallbacks = function () {
+        this.el.removeEventListener('dragleave', this._dragLeave);
+        this.el.classList.remove('ui-droppable-over');
+        if (this.moving) {
+            this.el.removeEventListener('dragover', this._dragOver);
+            this.el.removeEventListener('drop', this._drop);
+        }
+        // Note: this.moving is reset by callee of this routine to control the flow
+    };
+    /** @internal */
+    DDDroppable.prototype._canDrop = function () {
+        return dd_manager_1.DDManager.dragElement && (!this.accept || this.accept(dd_manager_1.DDManager.dragElement.el));
+    };
+    /** @internal */
+    DDDroppable.prototype._setupAccept = function () {
+        var _this = this;
+        if (this.option.accept && typeof this.option.accept === 'string') {
+            this.accept = function (el) {
+                return el.matches(_this.option.accept);
+            };
+        }
+        else {
+            this.accept = this.option.accept;
+        }
+        return this;
+    };
+    /** @internal */
+    DDDroppable.prototype._ui = function (drag) {
+        return __assign({ draggable: drag.el }, drag.ui());
+    };
+    return DDDroppable;
+}(dd_base_impl_1.DDBaseImplement));
+exports.DDDroppable = DDDroppable;
+//# sourceMappingURL=dd-droppable.js.map

package/dist/es5/h5/dd-droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-droppable.js","sourceRoot":"","sources":["../../../src/h5/dd-droppable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-droppable.ts 4.4.0\n * Copyright (c) 2021 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 { DDUtils } from './dd-utils';\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\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  /** @internal */\n  private moving: boolean;\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._dragEnter = this._dragEnter.bind(this);\n    this._dragOver = this._dragOver.bind(this);\n    this._dragLeave = this._dragLeave.bind(this);\n    this._drop = this._drop.bind(this);\n\n    this.el.classList.add('ui-droppable');\n    this.el.addEventListener('dragenter', this._dragEnter);\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) return;\n    super.enable();\n    this.el.classList.remove('ui-droppable-disabled');\n    this.el.addEventListener('dragenter', this._dragEnter);\n  }\n\n  public disable(forDestroy=false): void {\n    if (this.disabled) return;\n    super.disable();\n    if (!forDestroy) this.el.classList.add('ui-droppable-disabled');\n    this.el.removeEventListener('dragenter', this._dragEnter);\n  }\n\n  public destroy(): void {\n    if (this.moving) {\n      this._removeLeaveCallbacks();\n    } \n    this.disable(true);\n    this.el.classList.remove('ui-droppable');\n    this.el.classList.remove('ui-droppable-disabled');\n    delete this.moving;\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  private _dragEnter(event: DragEvent): void {\n    if (!this._canDrop()) return;\n    event.preventDefault();\n\n    if (this.moving) return; // ignore multiple 'dragenter' as we go over existing items\n    this.moving = true;\n\n    const ev = DDUtils.initEvent<DragEvent>(event, { 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.addEventListener('dragover', this._dragOver);\n    this.el.addEventListener('drop', this._drop);\n    this.el.addEventListener('dragleave', this._dragLeave);\n    this.el.classList.add('ui-droppable-over');\n  }\n\n  /** @internal called when an moving to drop item is being dragged over - do nothing but eat the event */\n  private _dragOver(event: DragEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  /** @internal called when the item is leaving our area, stop tracking if we had moving item */\n  private _dragLeave(event: DragEvent): void {\n\n    // ignore leave events on our children (get when starting to drag our items)\n    // Note: Safari Mac has null relatedTarget which causes #1684 so check if DragEvent is inside the grid instead\n    if (!event.relatedTarget) {\n      const { bottom, left, right, top } = this.el.getBoundingClientRect();\n      if (event.x < right && event.x > left && event.y < bottom && event.y > top) return;\n    } else if (this.el.contains(event.relatedTarget as HTMLElement)) return;\n\n    this._removeLeaveCallbacks();\n    if (this.moving) {\n      event.preventDefault();\n      const ev = DDUtils.initEvent<DragEvent>(event, { 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    delete this.moving;\n  }\n\n  /** @internal item is being dropped on us - call the client drop event */\n  private _drop(event: DragEvent): void {\n    if (!this.moving) return; // should not have received event...\n    event.preventDefault();\n    const ev = DDUtils.initEvent<DragEvent>(event, { 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    this._removeLeaveCallbacks();\n    delete this.moving;\n  }\n\n  /** @internal called to remove callbacks when leaving or dropping */\n  private _removeLeaveCallbacks() {\n    this.el.removeEventListener('dragleave', this._dragLeave);\n    this.el.classList.remove('ui-droppable-over');\n    if (this.moving) {\n      this.el.removeEventListener('dragover', this._dragOver);\n      this.el.removeEventListener('drop', this._drop);\n    }\n    // Note: this.moving is reset by callee of this routine to control the flow\n  }\n\n  /** @internal */\n  private _canDrop(): boolean {\n    return DDManager.dragElement && (!this.accept || this.accept(DDManager.dragElement.el));\n  }\n\n  /** @internal */\n  private _setupAccept(): DDDroppable {\n    if (this.option.accept && typeof this.option.accept === 'string') {\n      this.accept = (el: HTMLElement) => {\n        return el.matches(this.option.accept as string)\n      }\n    } else {\n      this.accept = this.option.accept as ((el: HTMLElement) => boolean);\n    }\n    return this;\n  }\n\n  /** @internal */\n  private _ui(drag: DDDraggable) {\n    return {\n      draggable: drag.el,\n      ...drag.ui()\n    };\n  }\n}\n\n"]}

package/dist/es5/h5/dd-element.d.ts

@@ -0,0 +1,27 @@
+/**
+ * dd-elements.ts 4.4.0
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ */
+import { DDResizable, DDResizableOpt } from './dd-resizable';
+import { GridItemHTMLElement } from './../types';
+import { DDDraggable, DDDraggableOpt } from './dd-draggable';
+import { DDDroppable, DDDroppableOpt } from './dd-droppable';
+export interface DDElementHost extends GridItemHTMLElement {
+    ddElement?: DDElement;
+}
+export declare class DDElement {
+    static init(el: DDElementHost): DDElement;
+    el: DDElementHost;
+    ddDraggable?: DDDraggable;
+    ddDroppable?: DDDroppable;
+    ddResizable?: DDResizable;
+    constructor(el: DDElementHost);
+    on(eventName: string, callback: (event: MouseEvent) => void): DDElement;
+    off(eventName: string): DDElement;
+    setupDraggable(opts: DDDraggableOpt): DDElement;
+    cleanDraggable(): DDElement;
+    setupResizable(opts: DDResizableOpt): DDElement;
+    cleanResizable(): DDElement;
+    setupDroppable(opts: DDDroppableOpt): DDElement;
+    cleanDroppable(): DDElement;
+}