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 gridstack#1204

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