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

Author: adumesny

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},

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)

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, {

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();