gridstack 5.1.1 → 6.0.0

package/dist/dd-touch.js

@@ -0,0 +1,179 @@
+"use strict";
+/**
+ * touch.ts 6.0.0
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pointerleave = exports.pointerenter = exports.pointerdown = exports.touchend = exports.touchmove = exports.touchstart = exports.isTouch = void 0;
+const dd_manager_1 = require("./dd-manager");
+/**
+ * Detect touch support - Windows Surface devices and other touch devices
+ * should we use this instead ? (what we had for always showing resize handles)
+ * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+ */
+exports.isTouch = ('ontouchstart' in document
+    || 'ontouchstart' in window
+    // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this
+    || (window.DocumentTouch && document instanceof window.DocumentTouch)
+    || navigator.maxTouchPoints > 0
+    || navigator.msMaxTouchPoints > 0);
+// interface TouchCoord {x: number, y: number};
+class DDTouch {
+}
+/**
+* Get the x,y position of a touch event
+*/
+// function getTouchCoords(e: TouchEvent): TouchCoord {
+//   return {
+//     x: e.changedTouches[0].pageX,
+//     y: e.changedTouches[0].pageY
+//   };
+// }
+/**
+ * Simulate a mouse event based on a corresponding touch event
+ * @param {Object} e A touch event
+ * @param {String} simulatedType The corresponding mouse event
+ */
+function simulateMouseEvent(e, simulatedType) {
+    // Ignore multi-touch events
+    if (e.touches.length > 1)
+        return;
+    // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
+    if (e.cancelable)
+        e.preventDefault();
+    const touch = e.changedTouches[0], simulatedEvent = document.createEvent('MouseEvents');
+    // Initialize the simulated mouse event using the touch event's coordinates
+    simulatedEvent.initMouseEvent(simulatedType, // type
+    true, // bubbles
+    true, // cancelable
+    window, // view
+    1, // detail
+    touch.screenX, // screenX
+    touch.screenY, // screenY
+    touch.clientX, // clientX
+    touch.clientY, // clientY
+    false, // ctrlKey
+    false, // altKey
+    false, // shiftKey
+    false, // metaKey
+    0, // button
+    null // relatedTarget
+    );
+    // Dispatch the simulated event to the target element
+    e.target.dispatchEvent(simulatedEvent);
+}
+/**
+ * Simulate a mouse event based on a corresponding Pointer event
+ * @param {Object} e A pointer event
+ * @param {String} simulatedType The corresponding mouse event
+ */
+function simulatePointerMouseEvent(e, simulatedType) {
+    // Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
+    if (e.cancelable)
+        e.preventDefault();
+    const simulatedEvent = document.createEvent('MouseEvents');
+    // Initialize the simulated mouse event using the touch event's coordinates
+    simulatedEvent.initMouseEvent(simulatedType, // type
+    true, // bubbles
+    true, // cancelable
+    window, // view
+    1, // detail
+    e.screenX, // screenX
+    e.screenY, // screenY
+    e.clientX, // clientX
+    e.clientY, // clientY
+    false, // ctrlKey
+    false, // altKey
+    false, // shiftKey
+    false, // metaKey
+    0, // button
+    null // relatedTarget
+    );
+    // Dispatch the simulated event to the target element
+    e.target.dispatchEvent(simulatedEvent);
+}
+/**
+ * Handle the touchstart events
+ * @param {Object} e The widget element's touchstart event
+ */
+function touchstart(e) {
+    // Ignore the event if another widget is already being handled
+    if (DDTouch.touchHandled)
+        return;
+    DDTouch.touchHandled = true;
+    // Simulate the mouse events
+    // simulateMouseEvent(e, 'mouseover');
+    // simulateMouseEvent(e, 'mousemove');
+    simulateMouseEvent(e, 'mousedown');
+}
+exports.touchstart = touchstart;
+/**
+ * Handle the touchmove events
+ * @param {Object} e The document's touchmove event
+ */
+function touchmove(e) {
+    // Ignore event if not handled by us
+    if (!DDTouch.touchHandled)
+        return;
+    simulateMouseEvent(e, 'mousemove');
+}
+exports.touchmove = touchmove;
+/**
+ * Handle the touchend events
+ * @param {Object} e The document's touchend event
+ */
+function touchend(e) {
+    // Ignore event if not handled
+    if (!DDTouch.touchHandled)
+        return;
+    // cancel delayed leave event when we release on ourself which happens BEFORE we get this!
+    if (DDTouch.pointerLeaveTimeout) {
+        window.clearTimeout(DDTouch.pointerLeaveTimeout);
+        delete DDTouch.pointerLeaveTimeout;
+    }
+    const wasDragging = !!dd_manager_1.DDManager.dragElement;
+    // Simulate the mouseup event
+    simulateMouseEvent(e, 'mouseup');
+    // simulateMouseEvent(event, 'mouseout');
+    // If the touch interaction did not move, it should trigger a click
+    if (!wasDragging) {
+        simulateMouseEvent(e, 'click');
+    }
+    // Unset the flag to allow other widgets to inherit the touch event
+    DDTouch.touchHandled = false;
+}
+exports.touchend = touchend;
+/**
+ * Note we don't get touchenter/touchleave (which are deprecated)
+ * see https://stackoverflow.com/questions/27908339/js-touch-equivalent-for-mouseenter
+ * so instead of PointerEvent to still get enter/leave and send the matching mouse event.
+ */
+function pointerdown(e) {
+    e.target.releasePointerCapture(e.pointerId); // <- Important!
+}
+exports.pointerdown = pointerdown;
+function pointerenter(e) {
+    // ignore the initial one we get on pointerdown on ourself
+    if (!dd_manager_1.DDManager.dragElement) {
+        // console.log('pointerenter ignored');
+        return;
+    }
+    // console.log('pointerenter');
+    simulatePointerMouseEvent(e, 'mouseenter');
+}
+exports.pointerenter = pointerenter;
+function pointerleave(e) {
+    // ignore the leave on ourself we get before releasing the mouse over ourself
+    // by delaying sending the event and having the up event cancel us
+    if (!dd_manager_1.DDManager.dragElement) {
+        // console.log('pointerleave ignored');
+        return;
+    }
+    DDTouch.pointerLeaveTimeout = window.setTimeout(() => {
+        delete DDTouch.pointerLeaveTimeout;
+        // console.log('pointerleave delayed');
+        simulatePointerMouseEvent(e, 'mouseleave');
+    }, 10);
+}
+exports.pointerleave = pointerleave;
+//# sourceMappingURL=dd-touch.js.map

package/dist/dd-touch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-touch.js","sourceRoot":"","sources":["../src/dd-touch.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * touch.ts 6.0.0\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\n\n/**\n * Detect touch support - Windows Surface devices and other touch devices\n * should we use this instead ? (what we had for always showing resize handles)\n * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\n */\nexport const isTouch: boolean = ( 'ontouchstart' in document\n  || 'ontouchstart' in window\n  // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this\n  || ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch)\n  || navigator.maxTouchPoints > 0\n  || (navigator as any).msMaxTouchPoints > 0\n);\n\n// interface TouchCoord {x: number, y: number};\n\nclass DDTouch {\n  public static touchHandled: boolean;\n  public static pointerLeaveTimeout: number;\n}\n\n/**\n* Get the x,y position of a touch event\n*/\n// function getTouchCoords(e: TouchEvent): TouchCoord {\n//   return {\n//     x: e.changedTouches[0].pageX,\n//     y: e.changedTouches[0].pageY\n//   };\n// }\n\n/**\n * Simulate a mouse event based on a corresponding touch event\n * @param {Object} e A touch event\n * @param {String} simulatedType The corresponding mouse event\n */\nfunction simulateMouseEvent(e: TouchEvent, simulatedType: string) {\n\n  // Ignore multi-touch events\n  if (e.touches.length > 1) return;\n\n  // Prevent \"Ignored attempt to cancel a touchmove event with cancelable=false\" errors\n  if (e.cancelable) e.preventDefault();\n\n  const touch = e.changedTouches[0], simulatedEvent = document.createEvent('MouseEvents');\n\n  // Initialize the simulated mouse event using the touch event's coordinates\n  simulatedEvent.initMouseEvent(\n    simulatedType,    // type\n    true,             // bubbles\n    true,             // cancelable\n    window,           // view\n    1,                // detail\n    touch.screenX,    // screenX\n    touch.screenY,    // screenY\n    touch.clientX,    // clientX\n    touch.clientY,    // clientY\n    false,            // ctrlKey\n    false,            // altKey\n    false,            // shiftKey\n    false,            // metaKey\n    0,                // button\n    null              // relatedTarget\n  );\n\n  // Dispatch the simulated event to the target element\n  e.target.dispatchEvent(simulatedEvent);\n}\n\n/**\n * Simulate a mouse event based on a corresponding Pointer event\n * @param {Object} e A pointer event\n * @param {String} simulatedType The corresponding mouse event\n */\nfunction simulatePointerMouseEvent(e: PointerEvent, simulatedType: string) {\n\n  // Prevent \"Ignored attempt to cancel a touchmove event with cancelable=false\" errors\n  if (e.cancelable) e.preventDefault();\n\n  const simulatedEvent = document.createEvent('MouseEvents');\n\n  // Initialize the simulated mouse event using the touch event's coordinates\n  simulatedEvent.initMouseEvent(\n    simulatedType,    // type\n    true,             // bubbles\n    true,             // cancelable\n    window,           // view\n    1,                // detail\n    e.screenX,    // screenX\n    e.screenY,    // screenY\n    e.clientX,    // clientX\n    e.clientY,    // clientY\n    false,            // ctrlKey\n    false,            // altKey\n    false,            // shiftKey\n    false,            // metaKey\n    0,                // button\n    null              // relatedTarget\n  );\n\n  // Dispatch the simulated event to the target element\n  e.target.dispatchEvent(simulatedEvent);\n}\n\n\n/**\n * Handle the touchstart events\n * @param {Object} e The widget element's touchstart event\n */\nexport function touchstart(e: TouchEvent) {\n  // Ignore the event if another widget is already being handled\n  if (DDTouch.touchHandled) return;  DDTouch.touchHandled = true;\n\n  // Simulate the mouse events\n  // simulateMouseEvent(e, 'mouseover');\n  // simulateMouseEvent(e, 'mousemove');\n  simulateMouseEvent(e, 'mousedown');\n}\n\n/**\n * Handle the touchmove events\n * @param {Object} e The document's touchmove event\n */\nexport function touchmove(e: TouchEvent) {\n  // Ignore event if not handled by us\n  if (!DDTouch.touchHandled)  return;\n\n  simulateMouseEvent(e, 'mousemove');\n}\n\n/**\n * Handle the touchend events\n * @param {Object} e The document's touchend event\n */\nexport function touchend(e: TouchEvent) {\n\n  // Ignore event if not handled\n  if (!DDTouch.touchHandled) return;\n\n  // cancel delayed leave event when we release on ourself which happens BEFORE we get this!\n  if (DDTouch.pointerLeaveTimeout) {\n    window.clearTimeout(DDTouch.pointerLeaveTimeout);\n    delete DDTouch.pointerLeaveTimeout;\n  }\n\n  const wasDragging = !!DDManager.dragElement;\n\n  // Simulate the mouseup event\n  simulateMouseEvent(e, 'mouseup');\n  // simulateMouseEvent(event, 'mouseout');\n\n  // If the touch interaction did not move, it should trigger a click\n  if (!wasDragging) {\n    simulateMouseEvent(e, 'click');\n  }\n\n  // Unset the flag to allow other widgets to inherit the touch event\n  DDTouch.touchHandled = false;\n}\n\n/**\n * Note we don't get touchenter/touchleave (which are deprecated)\n * see https://stackoverflow.com/questions/27908339/js-touch-equivalent-for-mouseenter\n * so instead of PointerEvent to still get enter/leave and send the matching mouse event.\n */\nexport function pointerdown(e: PointerEvent) {\n  (e.target as HTMLElement).releasePointerCapture(e.pointerId) // <- Important!\n}\n\nexport function pointerenter(e: PointerEvent) {\n  // ignore the initial one we get on pointerdown on ourself\n  if (!DDManager.dragElement) {\n    // console.log('pointerenter ignored');\n    return;\n  }\n  // console.log('pointerenter');\n  simulatePointerMouseEvent(e, 'mouseenter');\n}\n\nexport function pointerleave(e: PointerEvent) {\n  // ignore the leave on ourself we get before releasing the mouse over ourself\n  // by delaying sending the event and having the up event cancel us\n  if (!DDManager.dragElement) {\n    // console.log('pointerleave ignored');\n    return;\n  }\n  DDTouch.pointerLeaveTimeout = window.setTimeout(() => {\n    delete DDTouch.pointerLeaveTimeout;\n    // console.log('pointerleave delayed');\n    simulatePointerMouseEvent(e, 'mouseleave');\n  }, 10);\n}\n\n"]}

package/dist/es5/{h5/dd-base-impl.d.ts → dd-base-impl.d.ts}

@@ -1,5 +1,5 @@
 /**
- * dd-base-impl.ts 5.1.1
+ * dd-base-impl.ts 6.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 export declare type EventCallback = (event: Event) => boolean | void;

package/dist/es5/{h5/dd-base-impl.js → dd-base-impl.js}

@@ -1,14 +1,12 @@
 "use strict";
 /**
- * dd-base-impl.ts 5.1.1
+ * dd-base-impl.ts 6.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DDBaseImplement = void 0;
 var DDBaseImplement = /** @class */ (function () {
     function DDBaseImplement() {
-        /** @internal */
-        this._disabled = false;
         /** @internal */
         this._eventRegister = {};
     }

package/dist/es5/dd-base-impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../../src/dd-base-impl.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAGH;IAAA;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAjCC,sBAAW,qCAAQ;QADnB,mHAAmH;aACnH,cAAmC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;;OAAA;IASpD,4BAAE,GAAT,UAAU,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,6BAAG,GAAV,UAAW,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,gCAAM,GAAb;QACE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,iCAAO,GAAd;QACE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,iCAAO,GAAd;QACE,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,sCAAY,GAAnB,UAAoB,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;IACH,sBAAC;AAAD,CAAC,AAnCD,IAmCC;AAnCqB,0CAAe","sourcesContent":["/**\n * dd-base-impl.ts 6.0.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nexport type EventCallback = (event: Event) => boolean|void;\nexport abstract class DDBaseImplement {\n  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\nexport interface HTMLElementExtendOpt<T> {\n  el: HTMLElement;\n  option: T;\n  updateOption(T): DDBaseImplement;\n}\n"]}

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

@@ -1,29 +1,28 @@
 /**
- * dd-draggable.ts 5.1.1
+ * dd-draggable.ts 6.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { DDUIData } from '../types';
+import { DDUIData } from './types';
 export interface DDDraggableOpt {
     appendTo?: string | HTMLElement;
-    containment?: string | HTMLElement;
     handle?: string;
-    revert?: string | boolean | unknown;
-    scroll?: boolean;
     helper?: string | HTMLElement | ((event: Event) => HTMLElement);
     start?: (event: Event, ui: DDUIData) => void;
     stop?: (event: Event) => void;
     drag?: (event: Event, ui: DDUIData) => void;
 }
+declare type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
 export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
     el: HTMLElement;
     option: DDDraggableOpt;
     helper: HTMLElement;
     constructor(el: HTMLElement, option?: DDDraggableOpt);
-    on(event: 'drag' | 'dragstart' | 'dragstop', callback: (event: DragEvent) => void): void;
-    off(event: 'drag' | 'dragstart' | 'dragstop'): void;
+    on(event: DDDragEvent, callback: (event: DragEvent) => void): void;
+    off(event: DDDragEvent): void;
     enable(): void;
     disable(forDestroy?: boolean): void;
     destroy(): void;
     updateOption(opts: DDDraggableOpt): DDDraggable;
 }
+export {};

package/dist/es5/dd-draggable.js

@@ -0,0 +1,335 @@
+"use strict";
+/**
+ * dd-draggable.ts 6.0.0
+ * Copyright (c) 2021-2022 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 utils_1 = require("./utils");
+var dd_base_impl_1 = require("./dd-base-impl");
+var dd_touch_1 = require("./dd-touch");
+// let count = 0; // TEST
+var DDDraggable = /** @class */ (function (_super) {
+    __extends(DDDraggable, _super);
+    function DDDraggable(el, option) {
+        if (option === void 0) { option = {}; }
+        var _this = _super.call(this) || this;
+        _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._mouseDown = _this._mouseDown.bind(_this);
+        _this._mouseMove = _this._mouseMove.bind(_this);
+        _this._mouseUp = _this._mouseUp.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 () {
+        if (this.disabled === false)
+            return;
+        _super.prototype.enable.call(this);
+        this.dragEl.addEventListener('mousedown', this._mouseDown);
+        if (dd_touch_1.isTouch) {
+            this.dragEl.addEventListener('touchstart', dd_touch_1.touchstart);
+            this.dragEl.addEventListener('pointerdown', dd_touch_1.pointerdown);
+            // this.dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
+        }
+        this.el.classList.remove('ui-draggable-disabled');
+        this.el.classList.add('ui-draggable');
+    };
+    DDDraggable.prototype.disable = function (forDestroy) {
+        if (forDestroy === void 0) { forDestroy = false; }
+        if (this.disabled === true)
+            return;
+        _super.prototype.disable.call(this);
+        this.dragEl.removeEventListener('mousedown', this._mouseDown);
+        if (dd_touch_1.isTouch) {
+            this.dragEl.removeEventListener('touchstart', dd_touch_1.touchstart);
+            this.dragEl.removeEventListener('pointerdown', dd_touch_1.pointerdown);
+        }
+        this.el.classList.remove('ui-draggable');
+        if (!forDestroy)
+            this.el.classList.add('ui-draggable-disabled');
+    };
+    DDDraggable.prototype.destroy = function () {
+        if (this.dragging)
+            this._mouseUp(this.mouseDownEvent);
+        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 call when mouse goes down before a dragstart happens */
+    DDDraggable.prototype._mouseDown = function (e) {
+        // don't let more than one widget handle mouseStart
+        if (dd_manager_1.DDManager.mouseHandled)
+            return;
+        if (e.button !== 0)
+            return true; // only left click
+        // make sure we are clicking on a drag handle or child of it...
+        // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)
+        var className = this.option.handle.substring(1);
+        var el = e.target;
+        while (el && !el.classList.contains(className)) {
+            el = el.parentElement;
+        }
+        if (!el)
+            return;
+        this.mouseDownEvent = e;
+        delete this.dragging;
+        delete dd_manager_1.DDManager.dragElement;
+        delete dd_manager_1.DDManager.dropElement;
+        // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
+        document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble
+        document.addEventListener('mouseup', this._mouseUp, true);
+        if (dd_touch_1.isTouch) {
+            this.dragEl.addEventListener('touchmove', dd_touch_1.touchmove);
+            this.dragEl.addEventListener('touchend', dd_touch_1.touchend);
+        }
+        e.preventDefault();
+        dd_manager_1.DDManager.mouseHandled = true;
+        return true;
+    };
+    /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */
+    DDDraggable.prototype._mouseMove = function (e) {
+        var _a;
+        // console.log(`${count++} move ${e.x},${e.y}`)
+        var s = this.mouseDownEvent;
+        if (this.dragging) {
+            this._dragFollow(e);
+            var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drag' });
+            if (this.option.drag) {
+                this.option.drag(ev, this.ui());
+            }
+            this.triggerEvent('drag', ev);
+        }
+        else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {
+            /**
+             * don't start unless we've moved at least 3 pixels
+             */
+            this.dragging = true;
+            dd_manager_1.DDManager.dragElement = this;
+            // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
+            var grid = (_a = this.el.gridstackNode) === null || _a === void 0 ? void 0 : _a.grid;
+            if (grid) {
+                dd_manager_1.DDManager.dropElement = grid.el.ddElement.ddDroppable;
+            }
+            else {
+                delete dd_manager_1.DDManager.dropElement;
+            }
+            this.helper = this._createHelper(e);
+            this._setupHelperContainmentStyle();
+            this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
+            var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dragstart' });
+            this._setupHelperStyle(e);
+            if (this.option.start) {
+                this.option.start(ev, this.ui());
+            }
+            this.triggerEvent('dragstart', ev);
+        }
+        e.preventDefault();
+        return true;
+    };
+    /** @internal call when the mouse gets released to drop the item at current location */
+    DDDraggable.prototype._mouseUp = function (e) {
+        var _a;
+        document.removeEventListener('mousemove', this._mouseMove, true);
+        document.removeEventListener('mouseup', this._mouseUp, true);
+        if (dd_touch_1.isTouch) {
+            this.dragEl.removeEventListener('touchmove', dd_touch_1.touchmove, true);
+            this.dragEl.removeEventListener('touchend', dd_touch_1.touchend, true);
+        }
+        if (this.dragging) {
+            delete this.dragging;
+            // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)
+            if (((_a = dd_manager_1.DDManager.dropElement) === null || _a === void 0 ? void 0 : _a.el) === this.el.parentElement) {
+                delete dd_manager_1.DDManager.dropElement;
+            }
+            this.helperContainment.style.position = this.parentOriginStylePosition || null;
+            if (this.helper === this.el) {
+                this._removeHelperStyle();
+            }
+            else {
+                this.helper.remove();
+            }
+            var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dragstop' });
+            if (this.option.stop) {
+                this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!
+            }
+            this.triggerEvent('dragstop', ev);
+            // call the droppable method to receive the item
+            if (dd_manager_1.DDManager.dropElement) {
+                dd_manager_1.DDManager.dropElement.drop(e);
+            }
+        }
+        delete this.helper;
+        delete this.mouseDownEvent;
+        delete dd_manager_1.DDManager.dragElement;
+        delete dd_manager_1.DDManager.dropElement;
+        delete dd_manager_1.DDManager.mouseHandled;
+        e.preventDefault();
+    };
+    /** @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 = utils_1.Utils.cloneNode(this.el);
+        }
+        if (!document.body.contains(helper)) {
+            utils_1.Utils.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 set the fix position of the dragged item */
+    DDDraggable.prototype._setupHelperStyle = function (e) {
+        var _this = this;
+        this.helper.classList.add('ui-draggable-dragging');
+        // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
+        var style = this.helper.style;
+        style.pointerEvents = 'none'; // needed for over items to get enter/leave
+        // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)
+        style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
+        style.width = this.dragOffset.width + 'px';
+        style.height = this.dragOffset.height + 'px';
+        style.willChange = 'left, top';
+        style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
+        this._dragFollow(e); // now position it
+        style.transition = 'none'; // show up instantly
+        setTimeout(function () {
+            if (_this.helper) {
+                style.transition = null; // recover animation
+            }
+        }, 0);
+        return this;
+    };
+    /** @internal restore back the original style before dragging */
+    DDDraggable.prototype._removeHelperStyle = function () {
+        var _this = this;
+        var _a;
+        this.helper.classList.remove('ui-draggable-dragging');
+        var node = (_a = this.helper) === null || _a === void 0 ? void 0 : _a.gridstackNode;
+        // don't bother restoring styles if we're gonna remove anyway...
+        if (this.dragElementOriginStyle && (!node || !node._isAboutToRemove)) {
+            var helper_1 = this.helper;
+            // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'
+            var transition_1 = this.dragElementOriginStyle['transition'] || null;
+            helper_1.style.transition = this.dragElementOriginStyle['transition'] = 'none';
+            DDDraggable.originStyleProp.forEach(function (prop) { return helper_1.style[prop] = _this.dragElementOriginStyle[prop] || null; });
+            setTimeout(function () { return helper_1.style.transition = transition_1; }, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)
+        }
+        delete this.dragElementOriginStyle;
+        return this;
+    };
+    /** @internal updates the top/left position to follow the mouse */
+    DDDraggable.prototype._dragFollow = function (e) {
+        var containmentRect = { left: 0, top: 0 };
+        // if (this.helper.style.position === 'absolute') { // we use 'fixed'
+        //   const { left, top } = this.helperContainment.getBoundingClientRect();
+        //   containmentRect = { left, top };
+        // }
+        var style = this.helper.style;
+        var offset = this.dragOffset;
+        style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';
+        style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';
+    };
+    /** @internal */
+    DDDraggable.prototype._setupHelperContainmentStyle = function () {
+        this.helperContainment = this.helper.parentElement;
+        if (this.helper.style.position !== 'fixed') {
+            this.parentOriginStylePosition = this.helperContainment.style.position;
+            if (window.getComputedStyle(this.helperContainment).position.match(/static/)) {
+                this.helperContainment.style.position = 'relative';
+            }
+        }
+        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');
+            utils_1.Utils.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 TODO: set to public as called by DDDroppable! */
+    DDDraggable.prototype.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.
+            */
+        };
+    };
+    /** @internal properties we change during dragging, and restore back */
+    DDDraggable.originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top'];
+    return DDDraggable;
+}(dd_base_impl_1.DDBaseImplement));
+exports.DDDraggable = DDDraggable;
+//# sourceMappingURL=dd-draggable.js.map