gridstack 5.0.0 → 6.0.0

package/README.md

@@ -1,8 +1,6 @@
 # gridstack.js
 
 [![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
-[![Dependency Status](https://david-dm.org/gridstack/gridstack.js.svg)](https://david-dm.org/gridstack/gridstack.js)
-[![devDependency Status](https://david-dm.org/gridstack/gridstack.js/dev-status.svg)](https://david-dm.org/gridstack/gridstack.js#info=devDependencies)
 [![Coverage Status](https://coveralls.io/repos/github/gridstack/gridstack.js/badge.svg?branch=develop)](https://coveralls.io/github/gridstack/gridstack.js?branch=develop)
 [![downloads](https://img.shields.io/npm/dm/gridstack.svg)](https://www.npmjs.com/package/gridstack)
 
@@ -17,22 +15,21 @@ If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831)
 [![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny)
 
-Join us on Slack: https://gridstackjs.troolee.com
-
-[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com)
+Join us on Slack: https://gridstackjs.slack.com
 
+[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.slack.com)
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [Demo and examples](#demo-and-examples)
+- [Demo and API Documentation](#demo-and-api-documentation)
 - [Usage](#usage)
   - [Install](#install)
   - [Include](#include)
   - [Basic usage](#basic-usage)
   - [Requirements](#requirements)
-  - [API Documentation](#api-documentation)
   - [Extend Library](#extend-library)
+  - [Extend Engine](#extend-engine)
   - [Change grid columns](#change-grid-columns)
   - [Custom columns CSS](#custom-columns-css)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
@@ -45,6 +42,7 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Migrating to v3](#migrating-to-v3)
   - [Migrating to v4](#migrating-to-v4)
   - [Migrating to v5](#migrating-to-v5)
+  - [Migrating to v6](#migrating-to-v6)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -52,10 +50,9 @@ Join us on Slack: https://gridstackjs.troolee.com
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 
-# Demo and examples
-
-Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/)
+# Demo and API Documentation
 
+Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/), and complete [API documentation](https://github.com/gridstack/gridstack.js/tree/master/doc)
 
 # Usage
 
@@ -75,44 +72,21 @@ ES6 or Typescript
 ```js
 import 'gridstack/dist/gridstack.min.css';
 import { GridStack } from 'gridstack';
-// THEN to get HTML5 drag&drop
-import 'gridstack/dist/h5/gridstack-dd-native';
-// OR to get legacy jquery-ui drag&drop (support Mobile touch devices, h5 does not yet)
-import 'gridstack/dist/jq/gridstack-dd-jqueryui';
-// OR nothing to get static grids (API driven, no user drag&drop)
 ```
 
-**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, 
-which means you can possibly bring your own version
-```js
-  alias: {
-    'jquery': 'gridstack/dist/jq/jquery.js',
-    'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
-    'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
-    'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
-  },
-```
-
-Alternatively (single combined file) in html
+Alternatively (single combined file, notice the -all.js) in html
 
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
-<!-- HTML5 drag&drop (70k) -->
-<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
-<!-- OR jquery-ui drag&drop (195k) -->
-<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
-<!-- OR static grid (40k) -->
-<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
+<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
 ```
 
-**Note**: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
-
-**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future).
+**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future).
 You can use the es5 files and polyfill (larger) for older browser instead. For example:
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
 <script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
-<script src="node_modules/gridstack/dist/es5/gridstack-jq.js"></script>
+<script src="node_modules/gridstack/dist/es5/gridstack-all.js"></script>
 ```
 
 
@@ -159,16 +133,13 @@ grid.load(serializedData);
 GridStack.init();
 ```
 
+...or see list of all [API and options](https://github.com/gridstack/gridstack.js/tree/master/doc) available.
+
 see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example too.
 
 ## Requirements
 
-GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3.0.0 is a complete HTML5 re-write which removes all jquery dependency (still available for legacy apps). All you need to include now is `gridstack-h5.js` and `gridstack.min.css` (layouts are done using CSS column based %).
-
-## API Documentation
-
-Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree/master/doc).
-
+GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3 is a complete HTML5 re-write removing need for jquery (still available for legacy apps). v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
 
 ## Extend Library
 
@@ -186,6 +157,27 @@ let grid = GridStack.init();
 grid.printCount();
 ```
 
+## Extend Engine
+
+You can now (5.1+) easily create your own layout engine to further customize you usage. Here is a typescript example
+
+```ts
+import { GridStack, GridStackEngine, GridStackNod, GridStackMoveOpts } from 'gridstack';
+
+class CustomEngine extends GridStackEngine {
+
+  /** refined this to move the node to the given new location */
+  public moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {
+    // keep the same original X and Width and let base do it all...
+    o.x = node.x;
+    o.w = node.w;
+    return super.moveNode(node, o);
+  }
+}
+
+GridStack.registerEngine(CustomEngine); // globally set our custom class
+```
+
 ## Change grid columns
 
 GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:
@@ -239,7 +231,7 @@ and so on.
 Better yet, here is a SASS code snippet which can make life much easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81) and @StefanM98, [#868](https://github.com/gridstack/gridstack.js/issues/868)) and you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
 
 ```sass
-@use "sass;math";
+@use "sass:math";
 .grid-stack > .grid-stack-item {
 
   $gridstack-columns: 12;
@@ -281,21 +273,19 @@ GridStack.init({
 
 ## Touch devices support
 
-gridstack v3.2 jq version compiles touch support (html5 version does not yet support `touchmove` events. This will be added in a future release), so it works out of the box, no need for anything.
-You **used** to need [jQuery UI Touch Punch](https://github.com/RWAP/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable
-work on touch-based devices (now distributed as `dist/jq/jquery.ui.touch-punch.js` for reference).
-
+gridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize.
+Older versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.
 
-This option will be useful:
+This option is now the default:
 
 ```js
 let options = {
-  alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+  alwaysShowResizeHandle: 'mobile' // which defaults to /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 };
 GridStack.init(options);
 ```
 
-See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html). If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
+See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html).
 
 # gridstack.js for specific frameworks
 
@@ -387,7 +377,7 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
 
 2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop|dragstop` are now called **after** the DOM attributes have been updated.
 
-3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `minWidth` or `disableOneColumnMode`.
+3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `oneColumnSize` or `disableOneColumnMode`.
 
 **Note:** 2.x no longer support legacy IE11 and older due to using more compact ES6 output and typecsript native code. You will need to stay at 1.x
 
@@ -443,9 +433,44 @@ make sure to read v4 migration first!
 v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode:
 You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.
 
+## Migrating to v6
+
+the API did not really change from v5, but a complete re-write of Drag&Drop to use native mouseevent (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and touchevent (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).
+
+The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.
+
 # jQuery Application
 
-We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. 
+This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before
+
+```js
+import 'gridstack/dist/gridstack.min.css';
+import { GridStack } from 'gridstack';
+import 'gridstack/dist/jq/gridstack-dd-jqueryui';
+```
+**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, 
+which means you can possibly bring your own version
+```js
+  alias: {
+    'jquery': 'gridstack/dist/jq/jquery.js',
+    'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
+    'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
+    'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
+  },
+```
+Alternatively (single combined file) in html
+
+```html
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<!-- HTML5 drag&drop (70k) -->
+<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
+<!-- OR jquery-ui drag&drop (195k) -->
+<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
+<!-- OR static grid (40k) -->
+<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
+```
+
+We have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. 
 
 **NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.
 

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

@@ -1,6 +1,6 @@
 /**
- * dd-base-impl.ts 5.0
- * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ * 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;
 export declare abstract class DDBaseImplement {

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

@@ -1,14 +1,12 @@
 "use strict";
 /**
- * dd-base-impl.ts 5.0
- * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ * 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;
 class DDBaseImplement {
     constructor() {
-        /** @internal */
-        this._disabled = false;
         /** @internal */
         this._eventRegister = {};
     }

package/dist/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,MAAsB,eAAe;IAArC;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAlCC,mHAAmH;IACnH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IASpD,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,YAAY,CAAC,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;CACF;AAnCD,0CAmCC","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/{es5/h5/dd-draggable.d.ts → dd-draggable.d.ts}

@@ -1,29 +1,28 @@
 /**
- * dd-draggable.ts 5.0
- * Copyright (c) 2021 Alain Dumesny - see GridStack root license
+ * 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/dd-draggable.js

@@ -0,0 +1,313 @@
+"use strict";
+/**
+ * dd-draggable.ts 6.0.0
+ * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DDDraggable = void 0;
+const dd_manager_1 = require("./dd-manager");
+const utils_1 = require("./utils");
+const dd_base_impl_1 = require("./dd-base-impl");
+const dd_touch_1 = require("./dd-touch");
+// let count = 0; // TEST
+class DDDraggable extends dd_base_impl_1.DDBaseImplement {
+    constructor(el, option = {}) {
+        super();
+        this.el = el;
+        this.option = option;
+        // get the element that is actually supposed to be dragged by
+        let 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();
+    }
+    on(event, callback) {
+        super.on(event, callback);
+    }
+    off(event) {
+        super.off(event);
+    }
+    enable() {
+        if (this.disabled === false)
+            return;
+        super.enable();
+        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');
+    }
+    disable(forDestroy = false) {
+        if (this.disabled === true)
+            return;
+        super.disable();
+        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');
+    }
+    destroy() {
+        if (this.dragging)
+            this._mouseUp(this.mouseDownEvent);
+        this.disable(true);
+        delete this.el;
+        delete this.helper;
+        delete this.option;
+        super.destroy();
+    }
+    updateOption(opts) {
+        Object.keys(opts).forEach(key => this.option[key] = opts[key]);
+        return this;
+    }
+    /** @internal call when mouse goes down before a dragstart happens */
+    _mouseDown(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)
+        let className = this.option.handle.substring(1);
+        let 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 */
+    _mouseMove(e) {
+        var _a;
+        // console.log(`${count++} move ${e.x},${e.y}`)
+        let s = this.mouseDownEvent;
+        if (this.dragging) {
+            this._dragFollow(e);
+            const 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)
+            let 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);
+            const 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 */
+    _mouseUp(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();
+            }
+            const 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 */
+    _createHelper(event) {
+        let 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(prop => this.el.style[prop]);
+        }
+        return helper;
+    }
+    /** @internal set the fix position of the dragged item */
+    _setupHelperStyle(e) {
+        this.helper.classList.add('ui-draggable-dragging');
+        // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
+        const 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(() => {
+            if (this.helper) {
+                style.transition = null; // recover animation
+            }
+        }, 0);
+        return this;
+    }
+    /** @internal restore back the original style before dragging */
+    _removeHelperStyle() {
+        var _a;
+        this.helper.classList.remove('ui-draggable-dragging');
+        let 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)) {
+            let helper = this.helper;
+            // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'
+            let transition = this.dragElementOriginStyle['transition'] || null;
+            helper.style.transition = this.dragElementOriginStyle['transition'] = 'none';
+            DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);
+            setTimeout(() => helper.style.transition = transition, 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 */
+    _dragFollow(e) {
+        let containmentRect = { left: 0, top: 0 };
+        // if (this.helper.style.position === 'absolute') { // we use 'fixed'
+        //   const { left, top } = this.helperContainment.getBoundingClientRect();
+        //   containmentRect = { left, top };
+        // }
+        const style = this.helper.style;
+        const offset = this.dragOffset;
+        style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';
+        style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';
+    }
+    /** @internal */
+    _setupHelperContainmentStyle() {
+        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 */
+    _getDragOffset(event, el, parent) {
+        // in case ancestor has transform/perspective css properties that change the viewpoint
+        let xformOffsetX = 0;
+        let xformOffsetY = 0;
+        if (parent) {
+            const 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);
+            const testElPosition = testEl.getBoundingClientRect();
+            parent.removeChild(testEl);
+            xformOffsetX = testElPosition.left;
+            xformOffsetY = testElPosition.top;
+            // TODO: scale ?
+        }
+        const 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! */
+    ui() {
+        const containmentEl = this.el.parentElement;
+        const containmentRect = containmentEl.getBoundingClientRect();
+        const 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.
+            */
+        };
+    }
+}
+exports.DDDraggable = DDDraggable;
+/** @internal properties we change during dragging, and restore back */
+DDDraggable.originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top'];
+//# sourceMappingURL=dd-draggable.js.map