From 98c3a3a37eb5b68e52ea40c11f397b1316a90b5e Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Sat, 14 Mar 2020 07:45:01 -0700
Subject: [PATCH] TS: working demos * removed a bunch more jquery code in main
 file (more drag&drop will need to move out) * all the demos are finally
 running, found a bunch of issues of DOM vs jquery ->all but knockout which
 always inserts at (0,0) now -> RTL works a little better now, but still
 broken (hasn't worked in a while) * public API that take string | HTMLElement
 will now handle list with selector * using 'let' everywhere since not real
 global const

TODO: fix lint and test cases next...
---
 .eslintrc.js                              |   3 +-
 README.md                                 |   2 +-
 demo/advance.html                         |   5 +-
 demo/anijs.html                           |   5 +-
 demo/column.html                          |   6 +-
 demo/float.html                           |  13 +-
 demo/knockout.html                        |   6 +-
 demo/nested.html                          |   7 +-
 demo/responsive.html                      |   6 +-
 demo/right-to-left(rtl).html              |   6 +-
 demo/serialization.html                   |   6 +-
 demo/two.html                             |   6 +-
 doc/CHANGES.md                            |   3 +-
 doc/README.md                             |   2 +-
 spec/gridstack-spec.js                    |  18 +-
 src/gridstack-dragdrop-plugin.ts          |  14 +-
 src/gridstack-engine.ts                   |  76 +--
 src/gridstack.ts                          | 534 ++++++++++++----------
 src/jqueryui-gridstack-dragdrop-plugin.ts |  26 +-
 src/types.ts                              |   1 -
 src/utils.ts                              |  38 +-
 tsconfig.json                             |  18 -
 yarn.lock                                 |  12 +-
 23 files changed, 397 insertions(+), 416 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e62997fcf..76b691f34 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,6 +16,7 @@ module.exports = {
   rules: {
     'indent': ['error', 2],
     'max-len': ['error', 180],
-    'no-trailing-spaces': 'error'
+    'no-trailing-spaces': 'error',
+    'prefer-const': 0
   }
 };
diff --git a/README.md b/README.md
index a8df5ad0e..b9b9101e2 100644
--- a/README.md
+++ b/README.md
@@ -162,7 +162,7 @@ GridStack.init( {column: N} );
 
 2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.6.4/dist/gridstack-extra.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack-extra.css"/>
 
 <div class="grid-stack grid-stack-N">...</div>
 ```
diff --git a/demo/advance.html b/demo/advance.html
index ec71a386e..3bb6c31d9 100644
--- a/demo/advance.html
+++ b/demo/advance.html
@@ -13,10 +13,7 @@
   <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
 
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 
   <style type="text/css">
     .grid-stack-item-removing {
diff --git a/demo/anijs.html b/demo/anijs.html
index 4ca939ef8..a4def831d 100644
--- a/demo/anijs.html
+++ b/demo/anijs.html
@@ -9,10 +9,7 @@
   <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
   <link rel="stylesheet" href="demo.css"/>
 
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
 </head>
 <body>
diff --git a/demo/column.html b/demo/column.html
index 786aedfe4..a5bc7bb38 100644
--- a/demo/column.html
+++ b/demo/column.html
@@ -8,11 +8,7 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">
diff --git a/demo/float.html b/demo/float.html
index f1e761c14..d1509e3af 100644
--- a/demo/float.html
+++ b/demo/float.html
@@ -8,13 +8,6 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack.all.js"></script>
-  <!--
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
-  -->
-  </style>
 </head>
 <body>
   <div class="container-fluid">
@@ -30,6 +23,12 @@ <h1>Float grid demo</h1>
 
   <script type="text/javascript">
     var grid = GridStack.init({float: true});
+    
+    grid.on('added removed change', function(e, items) {
+      var str = '';
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     var items = [
       {x: 2, y: 1, width: 1, height: 2},
diff --git a/demo/knockout.html b/demo/knockout.html
index 1021503a2..d065fde99 100644
--- a/demo/knockout.html
+++ b/demo/knockout.html
@@ -9,11 +9,7 @@
   <link rel="stylesheet" href="demo.css"/>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js"></script>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">
diff --git a/demo/nested.html b/demo/nested.html
index 17203189b..116f88485 100644
--- a/demo/nested.html
+++ b/demo/nested.html
@@ -7,12 +7,7 @@
   <title>Nested grids demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
-
+  <script src="../dist/gridstack.all.js"></script>
   <style type="text/css">
     .grid-stack .grid-stack {
       /*margin: 0 -10px;*/
diff --git a/demo/responsive.html b/demo/responsive.html
index 8de3bce00..fd6f6b776 100644
--- a/demo/responsive.html
+++ b/demo/responsive.html
@@ -5,11 +5,7 @@
 
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div>
diff --git a/demo/right-to-left(rtl).html b/demo/right-to-left(rtl).html
index 555e86a18..ff2c208ad 100644
--- a/demo/right-to-left(rtl).html
+++ b/demo/right-to-left(rtl).html
@@ -14,11 +14,7 @@
   </style>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">
diff --git a/demo/serialization.html b/demo/serialization.html
index f5f11031a..5fa56121f 100644
--- a/demo/serialization.html
+++ b/demo/serialization.html
@@ -7,11 +7,7 @@
   <title>Serialization demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">
diff --git a/demo/two.html b/demo/two.html
index da0c540dc..8c58335ff 100644
--- a/demo/two.html
+++ b/demo/two.html
@@ -9,11 +9,7 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="demo.css"/>
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
-
-  <script src="../src/jquery.js"></script>
-  <script src="../src/gridstack.js"></script>
-  <script src="../src/jquery-ui.js"></script>
-  <script src="../src/gridstack.jQueryUI.js"></script>
+  <script src="../dist/gridstack.all.js"></script>
 
   <style type="text/css">
     .grid-stack {
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 7a32d435b..3ffd8beb2 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -35,7 +35,8 @@ Change log
 ## 1.1.0-dev (upcoming)
 
 - fix [1187](https://github.com/gridstack/gridstack.js/issues/1187) IE support for `CustomEvent` polyfill - thanks [@phil-blais](https://github.com/phil-blais)
-- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)
+- fix [1204](https://github.com/gridstack/gridstack.js/issues/1204) destroy drag&drop when removing node(s) instead of just disabling it.
+- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)	- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)
 
 ## 1.1.0 (2020-02-29)
 
diff --git a/doc/README.md b/doc/README.md
index 417dcbc38..3d78dbe30 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -373,7 +373,7 @@ Checks if specified area is empty.
 
 Locks/unlocks widget.
 
-- `el` - widget to modify.
+- `el` - widget or selector to modify.
 - `val` - if `true` widget will be locked.
 
 ### makeWidget(el)
diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js
index b8762e65b..ffd7e5169 100644
--- a/spec/gridstack-spec.js
+++ b/spec/gridstack-spec.js
@@ -1270,11 +1270,10 @@ describe('gridstack', function() {
         verticalMargin: 10
       };
       var grid = GridStack.init(options);
-      var items = $('.grid-stack-item');
-      for (var i = 0; i < items.length; i++) {
-        grid.locked(items[i], true);
-        expect($(items[i]).attr('data-gs-locked')).toBe('yes');
-      }
+      grid.locked('.grid-stack-item', true);
+      $('.grid-stack-item').each(function (i,item) {
+        expect($(item).attr('data-gs-locked')).toBe('yes');
+      })
     });
     it('should unlock widgets', function() {
       var options = {
@@ -1282,11 +1281,10 @@ describe('gridstack', function() {
         verticalMargin: 10
       };
       var grid = GridStack.init(options);
-      var items = $('.grid-stack-item');
-      for (var i = 0; i < items.length; i++) {
-        grid.locked(items[i], false);
-        expect($(items[i]).attr('data-gs-locked')).toBe(undefined);
-      }
+      grid.locked('.grid-stack-item', false);
+      $('.grid-stack-item').each(function (i,item) {
+        expect($(item).attr('data-gs-locked')).toBe(undefined);
+      })
     });
   });
 
diff --git a/src/gridstack-dragdrop-plugin.ts b/src/gridstack-dragdrop-plugin.ts
index b0d866edb..35eab889d 100644
--- a/src/gridstack-dragdrop-plugin.ts
+++ b/src/gridstack-dragdrop-plugin.ts
@@ -7,10 +7,10 @@
 */
 
 import { GridStack } from './gridstack';
-import { GridStackElement } from './types';
+import { GridItemHTMLElement } from './types';
 
 /** drag&drop options currently called from the main code, but others can be passed in grid options */
-export type DDOpts = 'enable' | 'disable' | 'option' | {} | any;
+export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | {} | any;
 export type DDKey = 'minWidth' | 'minHeight' | string;
 
 /**
@@ -28,23 +28,23 @@ export class GridStackDragDropPlugin {
     this.grid = grid;
   }
 
-  public resizable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+  public droppable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
     return this;
   }
 
-  public isDroppable(el: GridStackElement): boolean {
+  public isDroppable(el: GridItemHTMLElement): boolean {
     return false;
   }
 
-  public on(el: GridStackElement, eventName: string, callback): GridStackDragDropPlugin {
+  public on(el: GridItemHTMLElement, eventName: string, callback): GridStackDragDropPlugin {
     return this;
   }
 }
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
index dba2bb6e8..3ec6e79ef 100644
--- a/src/gridstack-engine.ts
+++ b/src/gridstack-engine.ts
@@ -72,15 +72,15 @@ export class GridStackEngine {
     this._sortNodes(-1);
 
     let nn = node;
-    const hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));
+    let hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));
     if (!this.float && !hasLocked) {
       nn = {x: 0, y: node.y, width: this.column, height: node.height};
     }
     while (true) {
-      const array1 = [5, 12, 8, 130, 44];
-      const found = array1.find(element => element > 10);
+      let array1 = [5, 12, 8, 130, 44];
+      let found = array1.find(element => element > 10);
 
-      const collisionNode = this.nodes.find( n => n !== node && Utils.isIntercepted(n, nn), {node: node, nn: nn});
+      let collisionNode = this.nodes.find( n => n !== node && Utils.isIntercepted(n, nn), {node: node, nn: nn});
       if (!collisionNode) { return; }
       this.moveNode(collisionNode, collisionNode.x, node.y + node.height,
         collisionNode.width, collisionNode.height, true);
@@ -88,8 +88,8 @@ export class GridStackEngine {
   };
 
   public isAreaEmpty(x: number, y: number, width: number, height: number) {
-    const nn = {x: x || 0, y: y || 0, width: width || 1, height: height || 1};
-    const collisionNode = this.nodes.find(function(n) {
+    let nn = {x: x || 0, y: y || 0, width: width || 1, height: height || 1};
+    let collisionNode = this.nodes.find(function(n) {
       return Utils.isIntercepted(n, nn);
     });
     return !collisionNode;
@@ -100,7 +100,7 @@ export class GridStackEngine {
     if (this.nodes.length === 0) { return; }
     this.batchUpdate();
     this._sortNodes();
-    const copyNodes = this.nodes;
+    let copyNodes = this.nodes;
     this.nodes = []; // pretend we have no nodes to conflict layout to start with...
     copyNodes.forEach(node => {
       if (!node.noMove && !node.locked) {
@@ -141,8 +141,8 @@ export class GridStackEngine {
         }
         let newY = n.y;
         while (newY >= n._packY) {
-          const box = {x: n.x, y: newY, width: n.width, height: n.height};
-          const collisionNode = this.nodes
+          let box = {x: n.x, y: newY, width: n.width, height: n.height};
+          let collisionNode = this.nodes
             .slice(0, i)
             .find(bn => Utils.isIntercepted(box, bn), {n: n, newY: newY});
           if (!collisionNode) {
@@ -156,11 +156,11 @@ export class GridStackEngine {
       this.nodes.forEach((n, i) => {
         if (n.locked) { return; }
         while (n.y > 0) {
-          const newY = n.y - 1;
+          let newY = n.y - 1;
           let canBeMoved = i === 0;
-          const box = {x: n.x, y: newY, width: n.width, height: n.height};
+          let box = {x: n.x, y: newY, width: n.width, height: n.height};
           if (i > 0) {
-            const collisionNode = this.nodes
+            let collisionNode = this.nodes
               .slice(0, i)
               .find(bn => Utils.isIntercepted(box, bn), {n: n, newY: newY});
             canBeMoved = collisionNode === undefined;
@@ -185,7 +185,7 @@ export class GridStackEngine {
     }
 
     // assign defaults for missing required fields
-    const defaults = {width: 1, height: 1, x: 0, y: 0};
+    let defaults = {width: 1, height: 1, x: 0, y: 0};
     node = Utils.defaults(node, defaults);
 
     // convert any strings over
@@ -237,7 +237,7 @@ export class GridStackEngine {
   public getDirtyNodes(verify?: boolean) {
     // compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state
     if (verify) {
-      const dirtNodes = [];
+      let dirtNodes = [];
       this.nodes.forEach(function (n) {
         if (n._dirty) {
           if (n.y === n._origY && n.x === n._origX && n.width === n._origW && n.height === n._origH) {
@@ -257,7 +257,7 @@ export class GridStackEngine {
     if (this.batchMode) { return; }
     detachNode = (detachNode === undefined ? true : detachNode);
     nodes = (nodes === undefined ? [] : (Array.isArray(nodes) ? nodes : [nodes]) );
-    const dirtyNodes = nodes.concat(this.getDirtyNodes());
+    let dirtyNodes = nodes.concat(this.getDirtyNodes());
     this.onchange(dirtyNodes, detachNode);
   };
 
@@ -280,12 +280,12 @@ export class GridStackEngine {
       this._sortNodes();
 
       for (var i = 0;; ++i) {
-        const x = i % this.column;
-        const y = Math.floor(i / this.column);
+        let x = i % this.column;
+        let y = Math.floor(i / this.column);
         if (x + node.width > this.column) {
           continue;
         }
-        const box = {x: x, y: y, width: node.width, height: node.height};
+        let box = {x: x, y: y, width: node.width, height: node.height};
         if (!this.nodes.find(n => Utils.isIntercepted(box, n), {x: x, y: y, node: node})) {
           node.x = x;
           node.y = y;
@@ -329,14 +329,14 @@ export class GridStackEngine {
     if (!this.isNodeChangedPosition(node, x, y, width, height)) {
       return false;
     }
-    const hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));
+    let hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));
 
     if (!this.maxRow && !hasLocked) {
       return true;
     }
 
     let clonedNode;
-    const clone = new GridStackEngine(
+    let clone = new GridStackEngine(
       this.column,
       null,
       this.float,
@@ -371,7 +371,7 @@ export class GridStackEngine {
       return true;
     }
 
-    const clone = new GridStackEngine(
+    let clone = new GridStackEngine(
       this.column,
       null,
       this.float,
@@ -387,10 +387,10 @@ export class GridStackEngine {
     if (typeof width !== 'number') { width = node.width; }
     if (typeof height !== 'number') { height = node.height; }
 
-    if (node.maxWidth !== undefined) { width = Math.min(width, node.maxWidth); }
-    if (node.maxHeight !== undefined) { height = Math.min(height, node.maxHeight); }
-    if (node.minWidth !== undefined) { width = Math.max(width, node.minWidth); }
-    if (node.minHeight !== undefined) { height = Math.max(height, node.minHeight); }
+    if (node.maxWidth) { width = Math.min(width, node.maxWidth); }
+    if (node.maxHeight) { height = Math.min(height, node.maxHeight); }
+    if (node.minWidth) { width = Math.max(width, node.minWidth); }
+    if (node.minHeight) { height = Math.max(height, node.minHeight); }
 
     if (node.x === x && node.y === y && node.width === width && node.height === height) {
       return false;
@@ -404,16 +404,16 @@ export class GridStackEngine {
     if (typeof width !== 'number') { width = node.width; }
     if (typeof height !== 'number') { height = node.height; }
 
-    if (node.maxWidth !== undefined) { width = Math.min(width, node.maxWidth); }
-    if (node.maxHeight !== undefined) { height = Math.min(height, node.maxHeight); }
-    if (node.minWidth !== undefined) { width = Math.max(width, node.minWidth); }
-    if (node.minHeight !== undefined) { height = Math.max(height, node.minHeight); }
+    if (node.maxWidth) { width = Math.min(width, node.maxWidth); }
+    if (node.maxHeight) { height = Math.min(height, node.maxHeight); }
+    if (node.minWidth) { width = Math.max(width, node.minWidth); }
+    if (node.minHeight) { height = Math.max(height, node.minHeight); }
 
     if (node.x === x && node.y === y && node.width === width && node.height === height) {
       return node;
     }
 
-    const resizing = node.width !== width;
+    let resizing = node.width !== width;
     node._dirty = true;
 
     node.x = x;
@@ -447,7 +447,7 @@ export class GridStackEngine {
   };
 
   public endUpdate() {
-    const n = this.nodes.find(function(n) { return n._updating; });
+    let n = this.nodes.find(function(n) { return n._updating; });
     if (n) {
       n._updating = false;
       this.nodes.forEach(function(n) { delete n._packY; });
@@ -467,9 +467,9 @@ export class GridStackEngine {
         // we save the original x,y,w (h isn't cached) to see what actually changed to propagate better.
         // Note: we don't need to check against out of bound scaling/moving as that will be done when using those cache values.
         nodes.forEach(function(node) {
-          const n = layout.find(function(l) { return l._id === node._id });
+          let n = layout.find(function(l) { return l._id === node._id });
           if (!n) return; // no cache for new nodes. Will use those values.
-          const ratio = column / this.column;
+          let ratio = column / this.column;
           // Y changed, push down same amount
           // TODO: detect doing item 'swaps' will help instead of move (especially in 1 column mode)
           if (node.y !== node._origY) {
@@ -502,7 +502,7 @@ export class GridStackEngine {
     if (!this.nodes.length || oldColumn === column) { return; }
 
     // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data
-    const copy: layout[] = [];
+    let copy: layout[] = [];
     this.nodes.forEach(function(n, i) { copy[i] = {x: n.x, y: n.y, width: n.width, _id: n._id} }); // only thing we change is x,y,w and id to find it back
     this._layouts = this._layouts || []; // use array to find larger quick
     this._layouts[oldColumn] = copy;
@@ -523,14 +523,14 @@ export class GridStackEngine {
     // see if we have cached previous layout.
     let cacheNodes = this._layouts[column] || [];
     // if not AND we are going up in size start with the largest layout as down-scaling is more accurate
-    const lastIndex = this._layouts.length - 1;
+    let lastIndex = this._layouts.length - 1;
     if (cacheNodes.length === 0 && column > oldColumn && column < lastIndex) {
       cacheNodes = this._layouts[lastIndex] || [];
       if (cacheNodes.length) {
         // pretend we came from that larger column by assigning those values as starting point
         oldColumn = lastIndex;
         cacheNodes.forEach(function(cacheNode) {
-          const j = nodes.findIndex(function(n) {return n && n._id === cacheNode._id});
+          let j = nodes.findIndex(function(n) {return n && n._id === cacheNode._id});
           if (j !== -1) {
             // still current, use cache info positions
             nodes[j].x = cacheNode.x;
@@ -545,7 +545,7 @@ export class GridStackEngine {
     // if we found cache re-use those nodes that are still current
     let newNodes = [];
     cacheNodes.forEach(function(cacheNode) {
-      const j = nodes.findIndex(function(n) {return n && n._id === cacheNode._id});
+      let j = nodes.findIndex(function(n) {return n && n._id === cacheNode._id});
       if (j !== -1) {
         // still current, use cache info positions
         nodes[j].x = cacheNode.x;
@@ -556,7 +556,7 @@ export class GridStackEngine {
       }
     });
     // ...and add any extra non-cached ones
-    const ratio = column / oldColumn;
+    let ratio = column / oldColumn;
     nodes.forEach(function(node) {
       if (!node) return;
       node.x = (column === 1 ? 0 : Math.round(node.x * ratio));
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 18733c654..1590382ae 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -8,13 +8,15 @@
 
 import { GridStackEngine } from './gridstack-engine'
 import { obsoleteOpts, obsoleteOptsDel, obsoleteAttr, obsolete, Utils } from './utils';
-import { GridStackElement, GridItemHTMLElement, GridstackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
+import { GridItemHTMLElement, GridstackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
 import { GridStackDragDropPlugin } from './gridstack-dragdrop-plugin';
 
 // TODO: TEMPORARY until we remove all jquery calls
 // also see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
 import * as $ from './jquery.js';
 
+export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+
 export interface GridHTMLElement extends HTMLElement {
   gridstack?: GridStack; // grid's parent DOM element points back to grid class
 }
@@ -37,6 +39,25 @@ interface GridCSSStyleSheet extends CSSStyleSheet {
   _max?: number; // internal tracker of the max # of rows we created
 }
 
+function getElement(els: GridStackElement): GridItemHTMLElement {
+  return (typeof els === 'string' ? 
+    (document.querySelector(els) || document.querySelector('#' + els) || document.querySelector('.' + els)) : els);
+}
+function getElements(els: GridStackElement): GridItemHTMLElement[] {
+  return (typeof els === 'string' ? Array.from(
+    document.querySelectorAll(els) || document.querySelectorAll('#' + els) || document.querySelectorAll('.' + els)
+    ) : [els]);
+}
+function getGridElement(els: string | HTMLElement): GridHTMLElement {
+  return (typeof els === 'string' ? 
+    (document.querySelector(els) || document.querySelector('#' + els) || document.querySelector('.' + els)) : els);
+}
+function getGridElements(els: string | HTMLElement): GridHTMLElement[] {
+  return (typeof els === 'string' ? Array.from(
+    document.querySelectorAll(els) || document.querySelectorAll('#' + els) || document.querySelectorAll('.' + els)
+    ) : [els]);
+}
+
 /**
  * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
  * Note: your grid elements MUST have the following classes for the CSS layout to work:
@@ -49,21 +70,24 @@ interface GridCSSStyleSheet extends CSSStyleSheet {
  */
 export class GridStack {
 
+  /** scoping so users can call GridStack.Utils.sort() for example */
+  public static Utils = Utils;
+
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
    * simply return the existing instance (ignore any passed options). There is also an initAll() version that support
    * multiple grids initialization at once.
    * @param options grid options (optional)
-   * @param elOrString element to convert to a grid (default to '.grid-stack' class selector)
+   * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
    *
    * @example
-   * const grid = GridStack.init();
+   * let grid = GridStack.init();
    *
    * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
-   * const grid = document.querySelector('.grid-stack').gridstack;
+   * let grid = document.querySelector('.grid-stack').gridstack;
    */
   public static init(options?: GridstackOptions, elOrString: GridStackElement = '.grid-stack'): GridStack {
-    const el: GridHTMLElement = (typeof elOrString === 'string' ? document.querySelector(elOrString) : elOrString);
+    let el = getGridElement(elOrString);
     if (!el) {
       if (typeof elOrString === 'string') {
         console.error('gridstack.js: init() no grid was found. Did you forget class ' + elOrString + ' on your element ?');
@@ -82,15 +106,15 @@ export class GridStack {
   /**
    * Will initialize a list of elements (given a selector) and return an array of grids.
    * @param options grid options (optional)
-   * @param selector element to convert to grids (default to '.grid-stack' class selector)
+   * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
    *
    * @example
-   * const grids = GridStack.initAll();
+   * let grids = GridStack.initAll();
    * grids.forEach(...)
    */
   public static initAll(options?: GridstackOptions, selector = '.grid-stack'): GridStack[] {
-    const grids: GridStack[] = [];
-    document.querySelectorAll(selector).forEach((el: GridHTMLElement) => {
+    let grids: GridStack[] = [];
+    getGridElements(selector).forEach(el => {
       if (!el.gridstack) {
         el.gridstack = new GridStack(el, options);
       }
@@ -128,9 +152,10 @@ export class GridStack {
    * @param el
    * @param opts
    */
-  public constructor(el: GridHTMLElement, opts: GridstackOptions = {}) {
+  public constructor(el: GridHTMLElement, opts?: GridstackOptions) {
     this.el = el; // exposed HTML element to the user
     this.$el = $(el); // legacy code
+    opts = opts || {}; // handles null/undefined/0
 
     obsoleteOpts(opts, 'width', 'column', 'v0.5.3');
     obsoleteOpts(opts, 'height', 'maxRow', 'v0.5.3');
@@ -149,10 +174,10 @@ export class GridStack {
       delete opts.row;
     }
 
-    const rowAttr = Utils.toNumber(el.getAttribute('data-gs-row'));
+    let rowAttr = Utils.toNumber(el.getAttribute('data-gs-row'));
 
     // elements attributes override any passed options (like CSS style) - merge the two together
-    const defaults: GridstackOptions = {
+    let defaults: GridstackOptions = {
       column: Utils.toNumber(el.getAttribute('data-gs-column')) || 12,
       minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('data-gs-min-row')) || 0,
       maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('data-gs-max-row')) || 0,
@@ -238,9 +263,9 @@ export class GridStack {
       let maxHeight = 0;
       this.engine.nodes.forEach(n => { maxHeight = Math.max(maxHeight, n.y + n.height) });
       cbNodes.forEach(n => {
-        const el = n.el;
+        let el = n.el;
         if (detachNode && n._id === null) {
-          if (el) { el.parentNode.removeChild(el) }
+          if (el && el.parentNode) { el.parentNode.removeChild(el) }
         } else {
           this._writeAttrs(el, n.x, n.y, n.width, n.height);
         }
@@ -251,12 +276,12 @@ export class GridStack {
     this.opts.maxRow);
 
     if (this.opts.auto) {
-      const elements = [];
-      const _this = this;
+      let elements = [];
+      let _this = this;
       this.$el.children('.' + this.opts.itemClass + ':not(.' + this.opts.placeholderClass + ')')
         .each((index, el) => {
-          const x = parseInt(el.getAttribute('data-gs-x'));
-          const y = parseInt(el.getAttribute('data-gs-y'));
+          let x = parseInt(el.getAttribute('data-gs-x'));
+          let y = parseInt(el.getAttribute('data-gs-y'));
           elements.push({
             el: el,
             // if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order
@@ -272,12 +297,9 @@ export class GridStack {
     let placeholderChild = document.createElement('div');
     placeholderChild.className = 'placeholder-content';
     placeholderChild.innerHTML = this.opts.placeholderText;
-
-    let placeholder = document.createElement('div');
-    placeholder.classList.add(this.opts.placeholderClass, this.opts.itemClass);
-    placeholder.style.display = 'none'
-    placeholder.appendChild(placeholderChild);
-    this.placeholder = placeholder;
+    this.placeholder = document.createElement('div');
+    this.placeholder.classList.add(this.opts.placeholderClass, this.opts.itemClass);
+    this.placeholder.appendChild(placeholderChild);
 
     this._updateContainerHeight();
 
@@ -285,27 +307,27 @@ export class GridStack {
     this.onResizeHandler();
 
     if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {
-      const trashZone = $(this.opts.removable);
+      let trashZone = $(this.opts.removable);
       if (!this.dd.isDroppable(trashZone)) {
         this.dd.droppable(trashZone, this.opts.removableOptions);
       }
       this.dd
         .on(trashZone, 'dropover', (event, ui) => {
-          const el = $(ui.draggable).get(0);
-          const node = el.gridstackNode;
+          let el: GridItemHTMLElement = ui.draggable.get(0);
+          let node = el.gridstackNode;
           if (!node || node._grid !== this) {
             return;
           }
-          el.dataset.inTrashZone = true;
+          el.dataset.inTrashZone = 'true';
           this._setupRemovingTimeout(el);
         })
         .on(trashZone, 'dropout', (event, ui) => {
-          const el = $(ui.draggable).get(0);
-          const node = el.gridstackNode;
+          let el: GridItemHTMLElement = ui.draggable.get(0);
+          let node = el.gridstackNode;
           if (!node || node._grid !== this) {
             return;
           }
-          el.dataset.inTrashZone = false;
+          el.dataset.inTrashZone = 'false';
           this._clearRemovingTimeout(el);
         });
     }
@@ -322,7 +344,7 @@ export class GridStack {
    * See also `makeWidget()`.
    *
    * @example
-   * const grid = GridStack.init();
+   * let grid = GridStack.init();
    * grid.addWidget(el, {width: 3, autoPosition: true});
    *
    * @param el widget to add
@@ -335,7 +357,7 @@ export class GridStack {
    * Legacy: Spelled out version of the widgets options, recommend use new version instead.
    *
    * @example
-   * const grid = GridStack.init();
+   * let grid = GridStack.init();
    * grid.addWidget(el, 0, 0, 3, 2, true);
    *
    * @param el widget to add
@@ -390,9 +412,9 @@ export class GridStack {
       return this.opts.cellHeight as number;
     }
     // compute the height taking margin into account (each row has margin other than last one)
-    const el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;
-    const height = Utils.toNumber(el.getAttribute('data-gs-height'));
-    const verticalMargin = this.opts.verticalMargin as number;
+    let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;
+    let height = Utils.toNumber(el.getAttribute('data-gs-height'));
+    let verticalMargin = this.opts.verticalMargin as number;
 
     return Math.round((el.offsetHeight - (height - 1) * verticalMargin) / height);
   }
@@ -409,7 +431,7 @@ export class GridStack {
    * grid.cellHeight(grid.cellWidth() * 1.2);
    */
   public cellHeight(val: numberOrString, noUpdate?: boolean): void {
-    const heightData = Utils.parseHeight(val);
+    let heightData = Utils.parseHeight(val);
     if (this.opts.cellHeightUnit === heightData.unit && this.opts.cellHeight === heightData.height) {
       return ;
     }
@@ -455,7 +477,7 @@ export class GridStack {
    */
   public column(column: number, doNotPropagate?: boolean) {
     if (this.opts.column === column) { return; }
-    const oldColumn = this.opts.column;
+    let oldColumn = this.opts.column;
 
     // if we go into 1 column mode (which happens if we're sized less than minWidth unless disableOneColumnMode is on)
     // then remember the original columns so we can restore.
@@ -476,7 +498,7 @@ export class GridStack {
     if (this.opts.oneColumnModeDomSort && column === 1) {
       domNodes = [];
       this.$el.children('.' + this.opts.itemClass).each((index, el: GridItemHTMLElement) => {
-        const node = el.gridstackNode;
+        let node = el.gridstackNode;
         if (node) { domNodes.push(node); }
       });
       if (!domNodes.length) { domNodes = undefined; }
@@ -498,11 +520,12 @@ export class GridStack {
    * Destroys a grid instance.
    * @param detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true).
    */
-  public destroy(detachGrid?: boolean): void {
+  public destroy(detachGrid = true): void {
     $(window).off('resize', this.onResizeHandler);
     this.disable();
-    if (detachGrid !== undefined && !detachGrid) {
+    if (!detachGrid) {
       this.removeAll(false);
+      this.el.classList.remove(this.opts._class);
       delete this.el.gridstack;
     } else {
       this.el.parentNode.removeChild(this.el);
@@ -593,14 +616,13 @@ export class GridStack {
    *
    * Returns an object with properties `x` and `y` i.e. the column and row in the grid.
    */
-  public getCellFromPixel(position: MousePosition, useOffset?: boolean): CellPosition {
-    const containerPos = (useOffset !== undefined && useOffset) ?
-      this.$el.offset() : this.$el.position();
-    const relativeLeft = position.left - containerPos.left;
-    const relativeTop = position.top - containerPos.top;
+  public getCellFromPixel(position: MousePosition, useOffset = false): CellPosition {
+    let containerPos = (useOffset ? this.$el.offset() : this.$el.position());
+    let relativeLeft = position.left - containerPos.left;
+    let relativeTop = position.top - containerPos.top;
 
-    const columnWidth = Math.floor(this.$el.width() / this.opts.column);
-    const rowHeight = Math.floor(this.$el.height() / parseInt(this.el.getAttribute('data-gs-current-row')));
+    let columnWidth = Math.floor(this.$el.width() / this.opts.column);
+    let rowHeight = Math.floor(this.$el.height() / parseInt(this.el.getAttribute('data-gs-current-row')));
 
     return {x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight)};
   }
@@ -627,8 +649,8 @@ export class GridStack {
    * @param val if true widget will be locked.
    */
   public locked(els: GridStackElement, val: boolean): GridStack {
-    $(els).each((index, el) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (node!) return;
       node.locked = (val || false);
       if (node.locked) {
@@ -644,18 +666,15 @@ export class GridStack {
    * If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets.
    * If you want gridstack to add the elements for you, use `addWidget()` instead.
    * Makes the given element a widget and returns it.
-   * @param el widget to convert.
+   * @param els widget or single selector to convert.
    *
    * @example
-   * const grid = GridStack.init();
+   * let grid = GridStack.init();
    * grid.el.appendChild('<div id="gsi-1" data-gs-width="3"></div>');
    * grid.makeWidget('gsi-1');
    */
-  public makeWidget(el: GridStackElement): HTMLElement {
-    if (typeof el === 'string') {
-      el = document.querySelector('#' + el) as HTMLElement;
-    }
-
+  public makeWidget(els: GridStackElement): HTMLElement {
+    let el = getElement(els);
     this._prepareElement(el, true);
     this._updateContainerHeight();
     this._triggerAddEvent();
@@ -666,13 +685,13 @@ export class GridStack {
 
   /**
    * Set the maxWidth for a widget.
-   * @param el widget to modify.
+   * @param els widget or selector to modify.
    * @param val A numeric value of the number of columns
    */
   public maxWidth(els: GridStackElement, val: number): GridStack {
     if (isNaN(val)) return;
-    $(els).each((index, el: GridItemHTMLElement) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (!node) { return; }
       node.maxWidth = (val || undefined);
       if (node.maxWidth) {
@@ -686,13 +705,13 @@ export class GridStack {
 
   /**
    * Set the minWidth for a widget.
-   * @param el widget to modify.
+   * @param els widget or selector to modify.
    * @param val A numeric value of the number of columns
    */
   public minWidth(els: GridStackElement, val: number): GridStack {
     if (isNaN(val)) return;
-    $(els).each((index, el: GridItemHTMLElement) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (!node) { return; }
       if (node.minWidth) {
         el.setAttribute('data-gs-min-width', String(val));
@@ -705,13 +724,13 @@ export class GridStack {
 
   /**
    * Set the maxHeight for a widget.
-   * @param el widget to modify.
+   * @param els widget or selector to modify.
    * @param val A numeric value of the number of rows
    */
   public maxHeight(els: GridStackElement, val: number): GridStack {
     if (isNaN(val)) return;
-    $(els).each((index, el: GridItemHTMLElement) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (!node) { return; }
       if (node.maxHeight) {
         el.setAttribute('data-gs-max-height', String(val));
@@ -724,13 +743,13 @@ export class GridStack {
 
   /**
    * Set the minHeight for a widget.
-   * @param el widget to modify.
+   * @param els widget or selector to modify.
    * @param val A numeric value of the number of rows
    */
   public minHeight(els: GridStackElement, val: number): GridStack {
     if (isNaN(val)) return;
-    $(els).each((index, el: GridItemHTMLElement) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (!node) { return; }
       if (node.minHeight) {
         el.setAttribute('data-gs-min-height', String(val));
@@ -743,12 +762,12 @@ export class GridStack {
 
   /**
    * Enables/Disables moving.
-   * @param el widget to modify.
+   * @param els widget or selector to modify.
    * @param val if true widget will be draggable.
    */
   public movable(els: GridStackElement, val: boolean): GridStack {
-    $(els).each((index, el: GridItemHTMLElement) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (!node) { return; }
       node.noMove = !(val || false);
       if (node.noMove) {
@@ -764,14 +783,14 @@ export class GridStack {
 
   /**
    * Changes widget position
-   * @param el  widget to modify
+   * @param els  widget or singular selector to modify
    * @param x new position x. If value is null or undefined it will be ignored.
    * @param y new position y. If value is null or undefined it will be ignored.
    */
-  public move(el: GridStackElement, x: number, y: number): void {
-    this._updateElement(el, (el, node) => {
-      x = (x !== null && x !== undefined) ? x : node.x;
-      y = (y !== null && y !== undefined) ? y : node.y;
+  public move(els: GridStackElement, x?: number, y?: number): void {
+    this._updateElement(els, (el, node) => {
+      x = (x !== undefined) ? x : node.x;
+      y = (y !== undefined) ? y : node.y;
 
       this.engine.moveNode(node, x, y, node.width, node.height);
     });
@@ -791,11 +810,19 @@ export class GridStack {
    *
    * Note: in some cases it is the same as calling native handler and parsing the event.
    * grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );
+   *
    */
   public on(eventName: GridStackEvent, callback: (event: CustomEvent, arg2?: GridStackNode[] | Record<string, any>, arg3?: Record<string, any>) => void) {
+    // check for array of names being passed instead
+    if (eventName.indexOf(' ') !== -1) {
+      var names = eventName.split(' ') as GridStackEvent[];
+      names.forEach(name => this.on(name, callback));
+      return;
+    }
+
     if (eventName === 'change' || eventName === 'added' || eventName === 'removed' || eventName === 'enable' || eventName === 'disable') {
       // native CustomEvent handlers - cash the generic handlers so we can remove
-      const noData = (eventName === 'enable' || eventName === 'disable');
+      let noData = (eventName === 'enable' || eventName === 'disable');
       this._gsEventHandler = this._gsEventHandler || {};
       if (noData) {
         this._gsEventHandler[eventName] = (event) => callback(event);
@@ -814,6 +841,13 @@ export class GridStack {
    * @param eventName of the event (see possible values)
    */
   public off(eventName: GridStackEvent) {
+    // check for array of names being passed instead
+    if (eventName.indexOf(' ') !== -1) {
+      var names = eventName.split(' ') as GridStackEvent[];
+      names.forEach(name => this.off(name));
+      return;
+    }
+
     if (eventName === 'change' || eventName === 'added' || eventName === 'removed' || eventName === 'enable' || eventName === 'disable') {
       // remove native CustomEvent handlers
       if (this._gsEventHandler && this._gsEventHandler[eventName]) {
@@ -828,21 +862,24 @@ export class GridStack {
 
   /**
    * Removes widget from the grid.
-   * @param el  widget to modify
+   * @param el  widget or selector to modify
    * @param detachNode if false DOM node won't be removed from the tree (Default? true).
    */
-  public removeWidget(el: GridStackElement, detachNode?: boolean) {
-    const elItem = $(el).get(0) as GridItemHTMLElement;
-    detachNode = (detachNode === undefined ? true : detachNode);
-    let node = elItem.gridstackNode;
-    // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
-    if (!node) {
-      node = this.engine.nodes.find(n => el === n.el);
-    }
-    if (!node) return;
+  public removeWidget(els: GridStackElement, detachNode?: boolean) {
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
+      // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
+      if (!node) {
+        node = this.engine.nodes.find(n => el === n.el);
+      }
+      if (!node) return;
 
-    delete elItem.gridstackNode;
-    this.engine.removeNode(node, detachNode);
+      // remove our DOM data (circular link) and drag&drop permanently
+      delete el.gridstackNode;
+      this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
+
+      this.engine.removeNode(node, detachNode);
+    });
     this._triggerRemoveEvent();
     this._triggerChangeEvent();
   }
@@ -852,24 +889,25 @@ export class GridStack {
    * @param detachNode if false DOM nodes won't be removed from the tree (Default? true).
    */
   public removeAll(detachNode?: boolean) {
-    if (detachNode !== false) {
-      // remove our data structure before list gets emptied and DOM elements stay behind
-      this.engine.nodes.forEach(n => delete n.el.gridstackNode);
-    }
+    // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
+    this.engine.nodes.forEach(n => {
+      delete n.el.gridstackNode;
+      this.dd.draggable(n.el, 'destroy').resizable(n.el, 'destroy');
+    });
     this.engine.removeAll(detachNode);
     this._triggerRemoveEvent();
   }
 
   /**
    * Changes widget size
-   * @param el  widget to modify
+   * @param els  widget or singular selector to modify
    * @param width new dimensions width. If value is null or undefined it will be ignored.
    * @param height  new dimensions height. If value is null or undefined it will be ignored.
    */
-  public resize(el: GridStackElement, width: number, height: number): void {
-    this._updateElement(el, (el, node) => {
-      width = (width !== null && width !== undefined) ? width : node.width;
-      height = (height !== null && height !== undefined) ? height : node.height;
+  public resize(els: GridStackElement, width?: number, height?: number): void {
+    this._updateElement(els, (el, node) => {
+      width = (width || node.width);
+      height = (height || node.height);
 
       this.engine.moveNode(node, node.x, node.y, width, height);
     });
@@ -877,12 +915,12 @@ export class GridStack {
 
   /**
    * Enables/Disables resizing.
-   * @param el  widget to modify
+   * @param els  widget or selector to modify
    * @param val  if true widget will be resizable.
    */
   public resizable(els: GridStackElement, val: boolean): GridStack {
-    $(els).each((index, el: GridItemHTMLElement) => {
-      const node = el.gridstackNode;
+    getElements(els).forEach(el => {
+      let node = el.gridstackNode;
       if (!node) { return; }
       node.noResize = !(val || false);
       if (node.noResize) {
@@ -919,18 +957,18 @@ export class GridStack {
 
   /**
    * Updates widget position/size.
-   * @param el widget to modify
+   * @param els  widget or singular selector to modify
    * @param x new position x. If value is null or undefined it will be ignored.
    * @param y new position y. If value is null or undefined it will be ignored.
    * @param width new dimensions width. If value is null or undefined it will be ignored.
    * @param height  new dimensions height. If value is null or undefined it will be ignored.
    */
-  public update(el: GridStackElement, x: number, y: number, width: number, height: number): void {
-    this._updateElement(el, (el, node) => {
-      x = (x !== null && x !== undefined) ? x : node.x;
-      y = (y !== null && y !== undefined) ? y : node.y;
-      width = (width !== null && width !== undefined) ? width : node.width;
-      height = (height !== null && height !== undefined) ? height : node.height;
+  public update(els: GridStackElement, x?: number, y?: number, width?: number, height?: number): void {
+    this._updateElement(els, (el, node) => {
+      x = (x !== undefined) ? x : node.x;
+      y = (y !== undefined) ? y : node.y;
+      width = (width || node.width);
+      height = (height || node.height);
 
       this.engine.moveNode(node, x, y, width, height);
     });
@@ -943,7 +981,7 @@ export class GridStack {
    * @param noUpdate (optional) if true, styles will not be updated
    */
   public verticalMargin(value: numberOrString, noUpdate?: boolean): void {
-    const heightData = Utils.parseHeight(value);
+    let heightData = Utils.parseHeight(value);
 
     if (this.opts.verticalMarginUnit === heightData.unit && this.opts.maxRow === heightData.height) {
       return ;
@@ -979,13 +1017,13 @@ export class GridStack {
    * }
    */
   public willItFit(x: number, y: number, width: number, height: number, autoPosition: boolean): boolean {
-    const node = {x: x, y: y, width: width, height: height, autoPosition: autoPosition};
+    let node = {x: x, y: y, width: width, height: height, autoPosition: autoPosition};
     return this.engine.canBePlacedWithRespectToHeight(node);
   }
 
   private _triggerChangeEvent(skipLayoutChange?: boolean): void {
     if (this.engine.batchMode) { return; }
-    const elements = this.engine.getDirtyNodes(true); // verify they really changed
+    let elements = this.engine.getDirtyNodes(true); // verify they really changed
     if (elements && elements.length) {
       if (!skipLayoutChange) {
         this.engine._layoutsNodesChange(elements);
@@ -1015,7 +1053,7 @@ export class GridStack {
   }
 
   private _triggerEvent(name: string, data?: any) {
-    const event = data ? new CustomEvent(name, {bubbles: false, detail: data}) : new Event(name);
+    let event = data ? new CustomEvent(name, {bubbles: false, detail: data}) : new Event(name);
     this.el.dispatchEvent(event);
   }
 
@@ -1025,7 +1063,7 @@ export class GridStack {
     }
     this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
     // insert style to parent (instead of 'head') to support WebComponent
-    const parent = this.el.parentNode as HTMLElement;
+    let parent = this.el.parentNode as HTMLElement;
     this._styles = Utils.createStylesheet(this._stylesId, parent);
     if (this._styles !== null) {
       this._styles._max = 0;
@@ -1037,7 +1075,7 @@ export class GridStack {
       return;
     }
 
-    const prefix = '.' + this.opts._class + ' .' + this.opts.itemClass;
+    let prefix = '.' + this.opts._class + ' .' + this.opts.itemClass;
     let getHeight;
 
     if (maxHeight === undefined) {
@@ -1052,8 +1090,8 @@ export class GridStack {
     if (this._styles._max !== 0 && maxHeight <= this._styles._max) { // Keep it increasing
       return ;
     }
-    const height = this.opts.cellHeight as number;
-    const margin = this.opts.verticalMargin as number;
+    let height = this.opts.cellHeight as number;
+    let margin = this.opts.verticalMargin as number;
 
     if (!this.opts.verticalMargin || this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
       getHeight = (nbRows, nbMargins) => {
@@ -1107,31 +1145,34 @@ export class GridStack {
       row = this.opts.minRow;
     }
     // check for css min height. Each row is cellHeight + verticalMargin, until last one which has no margin below
-    const cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
+    let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);
     if (cssMinHeight > 0) {
-      const verticalMargin = this.opts.verticalMargin as number;
-      const minRow =  Math.round((cssMinHeight + verticalMargin) / (this.getCellHeight() + verticalMargin));
+      let verticalMargin = this.opts.verticalMargin as number;
+      let minRow =  Math.round((cssMinHeight + verticalMargin) / (this.getCellHeight() + verticalMargin));
       if (row < minRow) {
         row = minRow;
       }
     }
     this.el.setAttribute('data-gs-current-row', String(row));
-    if (!this.opts.cellHeight) {
-      return ;
+    if (row === 0) {
+      this.el.style.removeProperty('height');
+      return;
     }
-    if (!this.opts.verticalMargin) {
-      this.el.style['height'] = (row * (this.opts.cellHeight as number)) + this.opts.cellHeightUnit;
-    } else if (this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
-      this.el.style['height'] = (row * ((this.opts.cellHeight as number) + (this.opts.verticalMargin as number)) -
-        (this.opts.verticalMargin as number)) + this.opts.cellHeightUnit;
+    let cellHeight = this.opts.cellHeight as number;
+    let vMargin = this.opts.verticalMargin as number;
+    let unit = this.opts.cellHeightUnit;
+    if (!cellHeight) {  return }
+
+    if (unit === this.opts.verticalMarginUnit) {
+      this.el.style.height = (row * (cellHeight + vMargin) - vMargin) + unit;
     } else {
-      this.el.style['height'] = 'calc(' + ((row * (this.opts.cellHeight as number)) + this.opts.cellHeightUnit) +
-        ' + ' + ((row * ((this.opts.verticalMargin as number) - 1)) + this.opts.verticalMarginUnit) + ')';
+      this.el.style.height = 'calc(' + (row * cellHeight) + unit +
+        ' + ' + (row * (vMargin - 1) + this.opts.verticalMarginUnit) + ')';
     }
   }
 
   private _setupRemovingTimeout(el: GridItemHTMLElement) {
-    const node = el.gridstackNode;
+    let node = el.gridstackNode;
     if (node._removeTimeout || !this.opts.removable) { return; }
     node._removeTimeout = setTimeout(() => {
       el.classList.add('grid-stack-item-removing');
@@ -1140,7 +1181,7 @@ export class GridStack {
   }
 
   private _clearRemovingTimeout(el: GridItemHTMLElement) {
-    const node = el.gridstackNode;
+    let node = el.gridstackNode;
     if (!node._removeTimeout) { return; }
     clearTimeout(node._removeTimeout);
     node._removeTimeout = null;
@@ -1155,41 +1196,39 @@ export class GridStack {
     // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
     let cellWidth;
     let cellFullHeight; // internal cellHeight + v-margin
-    const self = this;
 
     /** called when item starts moving/resizing */
-    const onStartMoving = function(event, ui) {
-      self.el.append(self.placeholder);
-      self.engine.cleanNodes();
-      self.engine.beginUpdate(node);
-      cellWidth = self.cellWidth();
-      const strictCellHeight = self.getCellHeight(); // heigh without v-margin
+    let onStartMoving = (event, ui) => {
+      this.engine.cleanNodes();
+      this.engine.beginUpdate(node);
+      cellWidth = this.cellWidth();
+      let strictCellHeight = this.getCellHeight(); // heigh without v-margin
       // compute height with v-margin (Note: we add 1 margin as last row is missing it)
-      cellFullHeight = (self.$el.height() + self.getVerticalMargin()) / parseInt(self.el.getAttribute('data-gs-current-row'));
+      cellFullHeight = (this.$el.height() + this.getVerticalMargin()) / parseInt(this.el.getAttribute('data-gs-current-row'));
 
       let { target } = event;
 
-      self.placeholder.setAttribute('data-gs-x', target.getAttribute('data-gs-x'));
-      self.placeholder.setAttribute('data-gs-y', target.getAttribute('data-gs-y'));
-      self.placeholder.setAttribute('data-gs-width', target.getAttribute('data-gs-width'));
-      self.placeholder.setAttribute('data-gs-height', target.getAttribute('data-gs-height'));
-      self.placeholder.style.display = '';
+      this.placeholder.setAttribute('data-gs-x', target.getAttribute('data-gs-x'));
+      this.placeholder.setAttribute('data-gs-y', target.getAttribute('data-gs-y'));
+      this.placeholder.setAttribute('data-gs-width', target.getAttribute('data-gs-width'));
+      this.placeholder.setAttribute('data-gs-height', target.getAttribute('data-gs-height'));
+      this.el.append(this.placeholder);
 
-      node.el = self.placeholder;
+      node.el = this.placeholder;
       node._beforeDragX = node.x;
       node._beforeDragY = node.y;
       node._prevYPix = ui.position.top;
-      const minHeight = (node.minHeight || 1);
-      const verticalMargin = self.opts.verticalMargin as number;
+      let minHeight = (node.minHeight || 1);
+      let verticalMargin = this.opts.verticalMargin as number;
 
       // mineHeight - Each row is cellHeight + verticalMargin, until last one which has no margin below
-      self.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
-      self.dd.resizable(el, 'option', 'minHeight', (strictCellHeight * minHeight) + (minHeight - 1) * verticalMargin);
+      this.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
+      this.dd.resizable(el, 'option', 'minHeight', (strictCellHeight * minHeight) + (minHeight - 1) * verticalMargin);
 
       if (event.type === 'resizestart') {
-        const itemElement = target.querySelector('.grid-stack-item') as HTMLElement;
+        let itemElement = target.querySelector('.grid-stack-item') as HTMLElement;
         if (itemElement) {
-          const ev = document.createEvent('HTMLEvents');
+          let ev = document.createEvent('HTMLEvents');
           ev.initEvent('resizestart', true, false);
           itemElement.dispatchEvent(event);
         }
@@ -1197,56 +1236,54 @@ export class GridStack {
     }
 
     /** called when item is being dragged/resized */
-    const dragOrResize = function(event, ui) {
+    let dragOrResize = (event, ui) => {
       let x = Math.round(ui.position.left / cellWidth);
       let y = Math.floor((ui.position.top + cellFullHeight / 2) / cellFullHeight);
       let width;
       let height;
 
       if (event.type === 'drag') {
-        const distance = ui.position.top - node._prevYPix;
+        let distance = ui.position.top - node._prevYPix;
         node._prevYPix = ui.position.top;
         Utils.updateScrollPosition(el, ui, distance);
-        if (el.dataset.inTrashZone || x < 0 || x >= self.engine.column || y < 0 ||
-          (!self.engine.float && y > self.engine.getRow())) {
+        if (el.dataset.inTrashZone || x < 0 || x >= this.engine.column || y < 0 ||
+          (!this.engine.float && y > this.engine.getRow())) {
           if (!node._temporaryRemoved) {
-            if (self.opts.removable === true) {
-              self._setupRemovingTimeout(el);
+            if (this.opts.removable === true) {
+              this._setupRemovingTimeout(el);
             }
 
             x = node._beforeDragX;
             y = node._beforeDragY;
 
-            $(self.placeholder).detach();
-            self.placeholder.style.display = 'none';
-            self.engine.removeNode(node);
-            self._updateContainerHeight();
+            if (this.placeholder.parentNode === this.el) { this.el.removeChild(this.placeholder) }
+            this.engine.removeNode(node);
+            this._updateContainerHeight();
 
             node._temporaryRemoved = true;
           } else {
             return;
           }
         } else {
-          self._clearRemovingTimeout(el);
+          this._clearRemovingTimeout(el);
 
           if (node._temporaryRemoved) {
-            self.engine.addNode(node);
-            this._writeAttrs(self.placeholder, x, y, width, height);
-            self.placeholder.style.display = '';
-            self.el.appendChild(self.placeholder);
-            node.el = self.placeholder;
+            this.engine.addNode(node);
+            this._writeAttrs(this.placeholder, x, y, width, height);
+            this.el.appendChild(this.placeholder);
+            node.el = this.placeholder;
             node._temporaryRemoved = false;
           }
         }
       } else if (event.type === 'resize')  {
         if (x < 0) return;
         width = Math.round(ui.size.width / cellWidth);
-        height = Math.round((ui.size.height + self.getVerticalMargin()) / cellFullHeight);
+        height = Math.round((ui.size.height + this.getVerticalMargin()) / cellFullHeight);
       }
       // width and height are undefined if not resizing
-      const _lastTriedWidth = width !== undefined ? width : node._lastTriedWidth;
-      const _lastTriedHeight = height !== undefined ? height : node._lastTriedHeight;
-      if (!self.engine.canMoveNode(node, x, y, width, height) ||
+      let _lastTriedWidth = (width || node._lastTriedWidth);
+      let _lastTriedHeight = (height || node._lastTriedHeight);
+      if (!this.engine.canMoveNode(node, x, y, width, height) ||
         (node._lastTriedX === x && node._lastTriedY === y &&
         node._lastTriedWidth === _lastTriedWidth && node._lastTriedHeight === _lastTriedHeight)) {
         return;
@@ -1255,8 +1292,8 @@ export class GridStack {
       node._lastTriedY = y;
       node._lastTriedWidth = width;
       node._lastTriedHeight = height;
-      self.engine.moveNode(node, x, y, width, height);
-      self._updateContainerHeight();
+      this.engine.moveNode(node, x, y, width, height);
+      this._updateContainerHeight();
 
       if (event.type === 'resize')  {
         $(event.target).trigger('gsresize', node);
@@ -1264,23 +1301,22 @@ export class GridStack {
     }
 
     /** called when the item stops moving/resizing */
-    const onEndMoving = function(event): void {
+    let onEndMoving = (event): void => {
       let { target } = event;
       if (!target.gridstackNode) {  return; }
 
-      // const forceNotify = false; what is the point of calling 'change' event with no data, when the 'removed' event is already called ?
-      $(self.placeholder).detach();
+      // let forceNotify = false; what is the point of calling 'change' event with no data, when the 'removed' event is already called ?
+      if (this.placeholder.parentNode === this.el) { this.el.removeChild(this.placeholder) }
       node.el = target;
-      self.placeholder.style.display = 'none';
 
       if (node._isAboutToRemove) {
         // forceNotify = true;
-        const gridToNotify = el.gridstackNode._grid;
+        let gridToNotify = el.gridstackNode._grid;
         gridToNotify._triggerRemoveEvent();
         delete el.gridstackNode;
         el.remove();
       } else {
-        self._clearRemovingTimeout(el);
+        this._clearRemovingTimeout(el);
         if (!node._temporaryRemoved) {
           Utils.removePositioningStyles(target);
           this._writeAttrs(target, node.x, node.y, node.width, node.height);
@@ -1290,14 +1326,14 @@ export class GridStack {
           node.x = node._beforeDragX;
           node.y = node._beforeDragY;
           node._temporaryRemoved = false;
-          self.engine.addNode(node);
+          this.engine.addNode(node);
         }
       }
 
-      self._updateContainerHeight();
-      self._triggerChangeEvent();
+      this._updateContainerHeight();
+      this._triggerChangeEvent();
 
-      self.engine.endUpdate();
+      this.engine.endUpdate();
 
       let nestedGrids = target.querySelectorAll('.grid-stack');
       if (nestedGrids.length && event.type === 'resizestop') {
@@ -1305,13 +1341,13 @@ export class GridStack {
           el.gridstack.onResizeHandler();
         });
 
-        self._triggerNativeEvent(target, '.grid-stack-item', 'resizestop');
-        self._triggerNativeEvent(target, '.grid-stack-item', 'gsresizestop');
+        this._triggerNativeEvent(target, '.grid-stack-item', 'resizestop');
+        this._triggerNativeEvent(target, '.grid-stack-item', 'gsresizestop');
       }
 
       if (event.type === 'resizestop') {
-        // self.$el.trigger('gsresizestop', o); TODO: missing target ?
-        self._triggerNativeEvent(self.el, null, 'gsresizestop');
+        // this.$el.trigger('gsresizestop', o); TODO: missing target ?
+        this._triggerNativeEvent(this.el, null, 'gsresizestop');
       }
     }
 
@@ -1361,10 +1397,10 @@ export class GridStack {
 
   /** call to write x,y,w,h attributes back to element */
   private _writeAttrs(el: HTMLElement, x?: number, y?: number, width?: number, height?: number): void {
-    if (x !== undefined) { el.setAttribute('data-gs-x', String(x)); }
-    if (y !== undefined) { el.setAttribute('data-gs-y', String(y)); }
-    if (width !== undefined) { el.setAttribute('data-gs-width', String(width)); }
-    if (height !== undefined) { el.setAttribute('data-gs-height', String(height)); }
+    if (x !== undefined && x !== null) { el.setAttribute('data-gs-x', String(x)); }
+    if (y !== undefined && y !== null) { el.setAttribute('data-gs-y', String(y)); }
+    if (width) { el.setAttribute('data-gs-width', String(width)); }
+    if (height) { el.setAttribute('data-gs-height', String(height)); }
   }
 
   /** call to write any default attributes back to element */
@@ -1377,10 +1413,10 @@ export class GridStack {
       el.removeAttribute('data-gs-auto-position');
     }
 
-    if (node.minWidth !== undefined) { el.setAttribute('data-gs-min-width', String(node.minWidth)); }
-    if (node.maxWidth !== undefined) { el.setAttribute('data-gs-max-width', String(node.maxWidth)); }
-    if (node.minHeight !== undefined) { el.setAttribute('data-gs-min-height', String(node.minHeight)); }
-    if (node.maxHeight !== undefined) { el.setAttribute('data-gs-max-height', String(node.maxHeight)); }
+    if (node.minWidth) { el.setAttribute('data-gs-min-width', String(node.minWidth)); }
+    if (node.maxWidth) { el.setAttribute('data-gs-max-width', String(node.maxWidth)); }
+    if (node.minHeight) { el.setAttribute('data-gs-min-height', String(node.minHeight)); }
+    if (node.maxHeight) { el.setAttribute('data-gs-max-height', String(node.maxHeight)); }
     if (node.noResize) {
       el.setAttribute('data-gs-no-resize', 'true');
     } else {
@@ -1399,8 +1435,8 @@ export class GridStack {
       el.removeAttribute('data-gs-locked');
     }
 
-    if (node.resizeHandles !== undefined) { el.setAttribute('data-gs-resize-handles', node.resizeHandles); }
-    if (node.id !== undefined) { el.setAttribute('data-gs-id', String(node.id)); }
+    if (node.resizeHandles) { el.setAttribute('data-gs-resize-handles', node.resizeHandles); }
+    if (node.id) { el.setAttribute('data-gs-id', String(node.id)); }
   }
 
   /** call to write any default attributes back to element */
@@ -1423,15 +1459,10 @@ export class GridStack {
     return node;
   }
 
-  private _updateElement(_el: GridStackElement, callback: (el:GridItemHTMLElement, node: GridStackNode) => void): void {
-    let el: GridItemHTMLElement;
-    if (typeof _el === 'string') {
-      el = document.querySelector('#'+_el) as GridItemHTMLElement;
-    } else {
-      el = _el;
-    }
+  private _updateElement(els: GridStackElement, callback: (el:GridItemHTMLElement, node: GridStackNode) => void): void {
+    let el = getElement(els);
     if (!el) { return; }
-    const node = el.gridstackNode;
+    let node = el.gridstackNode;
     if (!node) { return; }
 
     this.engine.cleanNodes();
@@ -1446,7 +1477,7 @@ export class GridStack {
   }
 
   private _setStaticClass() {
-    const staticClassName = 'grid-stack-static';
+    let staticClassName = 'grid-stack-static';
 
     if (this.opts.staticGrid === true) {
       this.el.classList.add(staticClassName);
@@ -1484,14 +1515,13 @@ export class GridStack {
 
     // vars used by the function callback
     let draggingElement: GridItemHTMLElement;
-    const self = this;
-
-    const onDrag = function(event, ui) {
-      const el = draggingElement;
-      const node = el.gridstackNode;
-      const pos = this.getCellFromPixel({left: event.pageX, top: event.pageY}, true);
-      const x = Math.max(0, pos.x);
-      const y = Math.max(0, pos.y);
+
+    let onDrag = (event, ui) => {
+      let el = draggingElement;
+      let node = el.gridstackNode;
+      let pos = this.getCellFromPixel({left: event.pageX, top: event.pageY}, true);
+      let x = Math.max(0, pos.x);
+      let y = Math.max(0, pos.y);
       if (!node._added) {
         node._added = true;
 
@@ -1503,60 +1533,60 @@ export class GridStack {
         this.engine.beginUpdate(node);
         this.engine.addNode(node);
 
-        this.el.appendChild(self.placeholder);
-        self._writeAttrs(self.placeholder, node.x, node.y, node.width, node.height);
-        self.placeholder.style.display = '';
-        node.el = self.placeholder;
+        this._writeAttrs(this.placeholder, node.x, node.y, node.width, node.height);
+        this.el.appendChild(this.placeholder);
+        node.el = this.placeholder;
         node._beforeDragX = node.x;
         node._beforeDragY = node.y;
 
-        self._updateContainerHeight();
+        this._updateContainerHeight();
       }
-      if (!self.engine.canMoveNode(node, x, y)) {
+      if (!this.engine.canMoveNode(node, x, y)) {
         return;
       }
-      self.engine.moveNode(node, x, y);
-      self._updateContainerHeight();
+      this.engine.moveNode(node, x, y);
+      this._updateContainerHeight();
     };
 
     this.dd
       .droppable(this.el, {
-        accept: (el: GridItemHTMLElement) => {
-          const node: GridStackNode = el.gridstackNode;
+        accept: ($el) => { // TODO: jquery
+          let el: GridItemHTMLElement = $el.get(0);
+          let node: GridStackNode = el.gridstackNode;
           if (node && node._grid === this) {
             return false;
           }
           if (typeof this.opts.acceptWidgets === 'function') {
             return this.opts.acceptWidgets(el);
           }
-          const selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets as string);
+          let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets as string);
           return el.matches(selector);
         }
       })
       .on(this.el, 'dropover', (event, ui) => {
-        const el: GridItemHTMLElement = ui.draggable;
+        let el: GridItemHTMLElement = ui.draggable.get(0);
         let width, height;
 
         // see if we already have a node with widget/height and check for attributes
         let origNode: GridStackNode = el.gridstackNode;
         if (!origNode || !origNode.width || !origNode.height) {
-          const w = parseInt(el.getAttribute('data-gs-width'));
+          let w = parseInt(el.getAttribute('data-gs-width'));
           if (w > 0) { origNode = origNode || {}; origNode.width = w; }
-          const h = parseInt(el.getAttribute('data-gs-height'));
+          let h = parseInt(el.getAttribute('data-gs-height'));
           if (h > 0) { origNode = origNode || {}; origNode.height = h; }
         }
 
         // if not calculate the grid size based on element outer size
         // height: Each row is cellHeight + verticalMargin, until last one which has no margin below
-        const cellWidth = this.cellWidth();
-        const cellHeight = this.getCellHeight();
-        const verticalMargin = this.opts.verticalMargin as number;
+        let cellWidth = this.cellWidth();
+        let cellHeight = this.getCellHeight();
+        let verticalMargin = this.opts.verticalMargin as number;
         width = origNode && origNode.width ? origNode.width : Math.ceil(el.offsetWidth / cellWidth);
         height = origNode && origNode.height ? origNode.height : Math.round((el.offsetHeight + verticalMargin) / (cellHeight + verticalMargin));
 
         draggingElement = el;
 
-        const node = this.engine._prepareNode({width: width, height: height, _added: false, _temporary: true});
+        let node = this.engine._prepareNode({width: width, height: height, _added: false, _temporary: true});
         node._isOutOfGrid = true;
         el.gridstackNode = node;
         el._gridstackNodeOrig = origNode;
@@ -1567,38 +1597,44 @@ export class GridStack {
       .on(this.el, 'dropout', (event, ui) => {
         // jquery-ui bug. Must verify widget is being dropped out
         // check node variable that gets set when widget is out of grid
-        const el: GridItemHTMLElement = ui.draggable;
-        const node = el.gridstackNode;
+        let el: GridItemHTMLElement = ui.draggable.get(0);
+        let node = el.gridstackNode;
         if (!node || !node._isOutOfGrid) {
           return;
         }
         $(el).unbind('drag', onDrag);
         node.el = null;
         this.engine.removeNode(node);
-        $(this.placeholder).detach();
+        if (this.placeholder.parentNode === this.el) {
+          this.el.removeChild(this.placeholder);
+        }
         this._updateContainerHeight();
         el.gridstackNode = el._gridstackNodeOrig;
         return false; // prevent parent from receiving msg (which may be grid as well)
       })
       .on(this.el, 'drop', (event, ui) => {
-        $(this.placeholder).detach();
-
-        const node = $(ui.draggable).get(0).gridstackNode;
+        if (this.placeholder.parentNode === this.el) {
+          this.el.removeChild(this.placeholder);
+        }
+        let el: GridItemHTMLElement = ui.draggable.get(0);
+        let node: GridStackNode = el.gridstackNode;
         delete node._isOutOfGrid;
         node._grid = this;
-        const el = $(ui.draggable).clone(false);
-        el.get(0).gridstackNode = node;
-        const originalNode = $(ui.draggable).get(0)._gridstackNodeOrig;
-        if (originalNode !== undefined && originalNode._grid !== undefined) {
+
+        let $el = ui.draggable.clone(false);
+
+        el = $el.get(0);
+        el.gridstackNode = node;
+        let originalNode = (ui.draggable.get(0) as GridItemHTMLElement)._gridstackNodeOrig;
+        if (originalNode && originalNode._grid) {
           originalNode._grid._triggerRemoveEvent();
         }
         $(ui.helper).remove();
-        node.el = el.get(0);
-        this.placeholder.style.display = 'none';
+        node.el = el;
         Utils.removePositioningStyles(el);
-        el.find('div.ui-resizable-handle').remove();
+        $el.find('div.ui-resizable-handle').remove();
 
-        el
+        $el
           .attr('data-gs-x', node.x)
           .attr('data-gs-y', node.y)
           .attr('data-gs-width', node.width)
@@ -1616,9 +1652,9 @@ export class GridStack {
         this._triggerChangeEvent();
 
         this.engine.endUpdate();
-        $(ui.draggable).unbind('drag', onDrag);
-        delete $(ui.draggable).get(0).gridstackNode;
-        delete $(ui.draggable).get(0)._gridstackNodeOrig;
+        ui.draggable.unbind('drag', onDrag);
+        delete ui.draggable.get(0).gridstackNode;
+        delete ui.draggable.get(0)._gridstackNodeOrig;
         this.$el.trigger('dropped', [originalNode, node]);
         return false; // prevent parent from receiving msg (which may be grid as well)
       });
diff --git a/src/jqueryui-gridstack-dragdrop-plugin.ts b/src/jqueryui-gridstack-dragdrop-plugin.ts
index cec84263a..84bd49f17 100644
--- a/src/jqueryui-gridstack-dragdrop-plugin.ts
+++ b/src/jqueryui-gridstack-dragdrop-plugin.ts
@@ -8,7 +8,7 @@
 
 import { GridStack } from './gridstack';
 import { GridStackDragDropPlugin, DDOpts, DDKey } from './gridstack-dragdrop-plugin';
-import { GridStackElement } from './types';
+import { GridItemHTMLElement } from './types';
 
 // TODO: TEMPORARY until can remove jquery-ui drag&drop and this class and use HTML5 instead !
 // see https://stackoverflow.com/questions/35345760/importing-jqueryui-with-typescript-and-requirejs
@@ -23,14 +23,14 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     super(grid);
   }
 
-  public resizable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
-    const $el = $(el);
-    if (opts === 'disable' || opts === 'enable') {
+  public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+    let $el = $(el);
+    if (opts === 'disable' || opts === 'enable' || opts === 'destroy') {
         $el.resizable(opts);
     } else if (opts === 'option') {
       $el.resizable(opts, key, value);
     } else {
-      const handles = $el.data('gs-resize-handles') ? $el.data('gs-resize-handles') : this.grid.opts.resizable.handles;
+      let handles = $el.data('gs-resize-handles') ? $el.data('gs-resize-handles') : this.grid.opts.resizable.handles;
       $el.resizable({...this.grid.opts.resizable, ...{handles: handles}, ...{ // was using $.extend()
         start: opts.start || function() {},
         stop: opts.stop || function() {},
@@ -40,9 +40,9 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
-  public draggable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
-    const $el = $(el);
-    if (opts === 'disable' || opts === 'enable') {
+  public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+    let $el = $(el);
+    if (opts === 'disable' || opts === 'enable' || opts === 'destroy') {
       $el.draggable(opts);
     } else {
       $el.draggable({...this.grid.opts.draggable, ...{ // was using $.extend()
@@ -56,18 +56,18 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
-  public droppable(el: GridStackElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
-    const $el = $(el);
+  public droppable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?): GridStackDragDropPlugin {
+    let $el = $(el);
     $el.droppable(opts);
     return this;
   }
 
-  public isDroppable(el: GridStackElement): boolean {
-    const $el = $(el);
+  public isDroppable(el: GridItemHTMLElement): boolean {
+    let $el = $(el);
     return Boolean($el.data('droppable'));
   }
 
-  public on(el: GridStackElement, eventName: string, callback): GridStackDragDropPlugin {
+  public on(el: GridItemHTMLElement, eventName: string, callback): GridStackDragDropPlugin {
     $(el).on(eventName, callback);
     return this;
   }
diff --git a/src/types.ts b/src/types.ts
index 3c649535c..019dc1743 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,7 +9,6 @@
 import { GridStack } from './gridstack';
 
 export type numberOrString = number | string;
-export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 export interface GridItemHTMLElement extends HTMLElement {
   gridstackNode?: GridStackNode; // grid items point back to node
   /** @internal */
diff --git a/src/utils.ts b/src/utils.ts
index bf9e95fe3..8bb3b7b2c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -10,7 +10,7 @@ import { GridstackWidget, GridStackNode, GridstackOptions, numberOrString } from
 
 /** checks for obsolete method names */
 export function obsolete(f, oldName: string, newName: string, rev: string) {
-  const wrapper = function() {
+  let wrapper = function() {
     console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
     'with `' + newName + '`. It will be **completely** removed in v1.0');
     return f.apply(this, arguments);
@@ -37,7 +37,7 @@ export function obsoleteOptsDel(opts: GridstackOptions, oldName: string, rev: st
 
 /** checks for obsolete Jquery element attributes */
 export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string, rev: string) {
-  const oldAttr = el.getAttribute(oldName);
+  let oldAttr = el.getAttribute(oldName);
   if (oldAttr !== null) {
     el.setAttribute(newName, oldAttr);
     console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
@@ -45,8 +45,7 @@ export function obsoleteAttr(el: HTMLElement, oldName: string, newName: string,
   }
 }
 
-
-/**
+ /**
  * Utility methods
  */
 export class Utils {
@@ -64,7 +63,7 @@ export class Utils {
    **/
   static sort(nodes: GridStackNode[], dir?: number, column?: number): GridStackNode[] {
     if (!column) {
-      const widths = nodes.map(function (node) { return node.x + node.width; });
+      let widths = nodes.map(function (node) { return node.x + node.width; });
       column = Math.max.apply(Math, widths);
     }
 
@@ -75,7 +74,7 @@ export class Utils {
   }
 
   static createStylesheet(id: string, parent?: HTMLElement): CSSStyleSheet {
-    const style: HTMLStyleElement = document.createElement('style');
+    let style: HTMLStyleElement = document.createElement('style');
     style.setAttribute('type', 'text/css');
     style.setAttribute('data-gs-style-id', id);
     if ((style as any).styleSheet) { // ??? only CSSImportRule have that and different beast...
@@ -89,7 +88,7 @@ export class Utils {
   }
 
   static removeStylesheet(id: string) {
-    const el = document.querySelector('STYLE[data-gs-style-id=' + id + ']');
+    let el = document.querySelector('STYLE[data-gs-style-id=' + id + ']');
     if (!el) return;
     el.parentNode.removeChild(el);
   }
@@ -123,7 +122,7 @@ export class Utils {
     let height: number;
     let heightUnit = 'px';
     if (typeof val === 'string') {
-      const match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/);
+      let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/);
       if (!match) {
         throw new Error('Invalid height');
       }
@@ -136,7 +135,7 @@ export class Utils {
   }
 
   static without(array, item) {
-    const index = array.indexOf(item);
+    let index = array.indexOf(item);
 
     if (index !== -1) {
       array = array.slice(0);
@@ -148,8 +147,8 @@ export class Utils {
 
   static sortBy(array, getter) {
     return array.slice(0).sort(function (left, right) {
-      const valueLeft = getter(left);
-      const valueRight = getter(right);
+      let valueLeft = getter(left);
+      let valueRight = getter(right);
 
       if (valueRight === valueLeft) {
         return 0;
@@ -160,7 +159,7 @@ export class Utils {
   }
 
   static defaults(target, arg1) {
-    const sources = Array.prototype.slice.call(arguments, 1);
+    let sources = Array.prototype.slice.call(arguments, 1);
 
     sources.forEach(function (source) {
       for (let prop in source) {
@@ -190,7 +189,7 @@ export class Utils {
   }
 
   static removePositioningStyles(el) {
-    const style = el.style;
+    let style = el.style;
     if (style.position) {
       style.removeProperty('position');
     }
@@ -222,19 +221,19 @@ export class Utils {
 
   static updateScrollPosition(el, ui, distance) {
     // is widget in view?
-    const rect = el.getBoundingClientRect();
-    const innerHeightOrClientHeight = (window.innerHeight || document.documentElement.clientHeight);
+    let rect = el.getBoundingClientRect();
+    let innerHeightOrClientHeight = (window.innerHeight || document.documentElement.clientHeight);
     if (rect.top < 0 ||
       rect.bottom > innerHeightOrClientHeight
     ) {
       // set scrollTop of first parent that scrolls
       // if parent is larger than el, set as low as possible
       // to get entire widget on screen
-      const offsetDiffDown = rect.bottom - innerHeightOrClientHeight;
-      const offsetDiffUp = rect.top;
-      const scrollEl = this.getScrollParent(el);
+      let offsetDiffDown = rect.bottom - innerHeightOrClientHeight;
+      let offsetDiffUp = rect.top;
+      let scrollEl = this.getScrollParent(el);
       if (scrollEl !== null) {
-        const prevScroll = scrollEl.scrollTop;
+        let prevScroll = scrollEl.scrollTop;
         if (rect.top < 0 && distance < 0) {
           // moving up
           if (el.offsetHeight > innerHeightOrClientHeight) {
@@ -256,3 +255,4 @@ export class Utils {
     }
   }
 }
+
diff --git a/tsconfig.json b/tsconfig.json
index 948886cf1..af6514e14 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,26 +2,8 @@
   "compilerOptions": {
     /*
     "allowJs": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "inlineSources": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
-    "declaration": true,
-    "lib": [ "es6", "es2015", "dom" ],
-    "module": "es6",
-    "noImplicitAny": false,
-    "outDir": "./dist",
-    "sourceMap": true,
-    "strict": false,
-    "target": "es5",
-     */
-     /*
-     "outDir": "./dist/",
-     "noImplicitAny": false,
-     "module": "commonjs",
-     "target": "es5",
-     "allowJs": true
    */
     "declaration": true,
     "emitDecoratorMetadata": true,
diff --git a/yarn.lock b/yarn.lock
index bda4f943d..da9a7d9b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -374,14 +374,14 @@ acorn-jsx@^5.1.0:
   integrity sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==
 
 acorn@^6.2.1:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
-  integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
+  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
 acorn@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
-  integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
 
 adm-zip@^0.4.9:
   version "0.4.14"