From 4e5dddcbecc2cd8829da3f1b26a7f39d5496461a Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Wed, 11 Mar 2020 16:09:54 -0700
Subject: [PATCH] destroy drag&drop when removing node(s) * calling
 `grid.destroy(false)` will clean things and let you init() again. * removing
 an item will now nuke  jquery drag&drop using `draggable('destroy')` instead
 of just disabling. This also removes all JQ styles added if you keep DOM
 element around. * also removes extra grid style left behind * fix for #1204

---
 demo/float.html           |  7 ++++++-
 doc/CHANGES.md            |  1 +
 src/gridstack.jQueryUI.js |  4 ++--
 src/gridstack.js          | 20 ++++++++++++--------
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/demo/float.html b/demo/float.html
index dbc66085b..8e20ed50a 100644
--- a/demo/float.html
+++ b/demo/float.html
@@ -24,10 +24,15 @@ <h1>Float grid demo</h1>
     <div class="grid-stack"></div>
   </div>
 
-
   <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: 1},
       {x: 2, y: 3, width: 3, height: 1},
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 7a32d435b..994b374c1 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -35,6 +35,7 @@ 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)
+- 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)
 
 ## 1.1.0 (2020-02-29)
diff --git a/src/gridstack.jQueryUI.js b/src/gridstack.jQueryUI.js
index 0c5c95fb2..d2aeb60f2 100644
--- a/src/gridstack.jQueryUI.js
+++ b/src/gridstack.jQueryUI.js
@@ -31,7 +31,7 @@
 
   JQueryUIGridStackDragDropPlugin.prototype.resizable = function(el, opts) {
     el = $(el);
-    if (opts === 'disable' || opts === 'enable') {
+    if (opts === 'disable' || opts === 'enable' || opts === 'destroy') {
       el.resizable(opts);
     } else if (opts === 'option') {
       var key = arguments[2];
@@ -53,7 +53,7 @@
 
   JQueryUIGridStackDragDropPlugin.prototype.draggable = function(el, opts) {
     el = $(el);
-    if (opts === 'disable' || opts === 'enable') {
+    if (opts === 'disable' || opts === 'enable' || opts === 'destroy') {
       el.draggable(opts);
     } else {
       el.draggable($.extend({}, this.grid.opts.draggable, {
diff --git a/src/gridstack.js b/src/gridstack.js
index a59ce77c9..e9fa17d66 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -1505,34 +1505,38 @@
   };
 
   GridStack.prototype.removeWidget = function(el, detachNode) {
-    detachNode = (detachNode === undefined ? true : detachNode);
     el = $(el);
     var node = el.data('_gridstack_node');
     // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
     if (!node) {
       node = this.engine.getNodeDataByDOMEl(el.get(0));
     }
-
+    // remove our DOM data (circular link) and drag&drop permanently
     el.removeData('_gridstack_node');
+    this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
+
     this.engine.removeNode(node, detachNode);
     this._triggerRemoveEvent();
     this._triggerChangeEvent(true); // trigger any other changes
   };
 
   GridStack.prototype.removeAll = function(detachNode) {
-    if (detachNode !== false) {
-      // remove our data structure before list gets emptied and DOM elements stay behind
-      this.engine.nodes.forEach(function(node) { $(node.el).removeData('_gridstack_node') });
-    }
+    // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
+    this.engine.nodes.forEach(function(node) {
+      var el = $(node.el);
+      el.removeData('_gridstack_node');
+      this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
+    }, this);
+
     this.engine.removeAll(detachNode);
     this._triggerRemoveEvent();
   };
 
   GridStack.prototype.destroy = function(detachGrid) {
     $(window).off('resize', this.onResizeHandler);
-    this.disable();
-    if (detachGrid !== undefined && !detachGrid) {
+    if (detachGrid === false) {
       this.removeAll(false);
+      this.$el.removeClass(this.opts._class);
       delete this.$el.get(0).gridstack;
     } else {
       this.$el.remove();