TS: more drag&drop fix

* fixed typo, and converted adavnce.html
TODO: toolbar item is removed when inserted (even though we clone).

Author: adumesny

demo/advance.html

@@ -111,8 +111,8 @@ <h1>Advanced Demo</h1>
       },
       removable: '#trash',
       removeTimeout: 100,
-      // dragIn: '.newWidget',
-      // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
+      dragIn: '.newWidget',
+      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
       acceptWidgets: '.newWidget'
     });
 
@@ -121,13 +121,6 @@ <h1>Advanced Demo</h1>
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
       console.log(e.type + ' ' + items.length + ' items:' + str );
     });
-    // TODO: switch jquery-ui out
-    $('.newWidget').draggable({
-      revert: 'invalid',
-      scroll: false,
-      appendTo: 'body',
-      helper: 'clone'
-    });
   </script>
 </body>
 

src/gridstack-dragdrop-plugin.ts

@@ -8,8 +8,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import { GridStack, GridStackElement } from './gridstack';
-import { GridItemHTMLElement } from './types';
-import { DDDragInOpt } from '../dist/types';
+import { GridItemHTMLElement, DDDragInOpt } from './types';
 
 /** Drag&Drop drop options */
 export type DDDropOpt = {
@@ -33,10 +32,16 @@ export class GridStackDragDropPlugin {
   protected grid: GridStack;
   static registeredPlugins: typeof GridStackDragDropPlugin[] = [];
 
+  /** call this method to register your plugin instead of the default no-op one */
   static registerPlugin(pluginClass: typeof GridStackDragDropPlugin) {
     GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
   }
 
+  /** get the current registered plugin to use */
+  static get(): typeof GridStackDragDropPlugin {
+    return GridStackDragDropPlugin.registeredPlugins[0] || GridStackDragDropPlugin;
+  }
+
   public constructor(grid: GridStack) {
     this.grid = grid;
   }

src/gridstack.ts

@@ -213,7 +213,7 @@ export class GridStack {
     if (this.opts.ddPlugin === false) {
       this.opts.ddPlugin = GridStackDragDropPlugin;
     } else if (this.opts.ddPlugin === undefined) {
-      this.opts.ddPlugin = GridStackDragDropPlugin.registeredPlugins[0] || GridStackDragDropPlugin;
+      this.opts.ddPlugin = GridStackDragDropPlugin.get();
     }
     this.dd = new (this.opts.ddPlugin as typeof GridStackDragDropPlugin)(this);