TS: initial dragIn | dragInOptions

* hidding the jquery-ui  drag&drop from external (ex: toolbar) functionality.
* added grid options: dragIn | dragInOptions

Author: adumesny

demo/advance.html

@@ -111,6 +111,8 @@ <h1>Advanced Demo</h1>
       },
       removable: '#trash',
       removeTimeout: 100,
+      // dragIn: '.newWidget',
+      // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
       acceptWidgets: '.newWidget'
     });
 
@@ -119,7 +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',

demo/two.html

@@ -97,6 +97,7 @@ <h1>Two grids demo</h1>
       float: false,
       removable: '.trash',
       removeTimeout: 100,
+      dragIn: '.sidebar .grid-stack-item',
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);
@@ -120,14 +121,6 @@ <h1>Two grids demo</h1>
       grid.commit();
     });
 
-    // TODO: switch jquery-ui out
-    $('.sidebar .grid-stack-item').draggable({
-      revert: 'invalid',
-      handle: '.grid-stack-item-content',
-      scroll: false,
-      appendTo: 'body',
-    });
-
     function toggleFloat(button, i) {
       grids[i].float(! grids[i].getFloat());
       button.innerHTML = 'float: ' + grids[i].getFloat();

doc/CHANGES.md

@@ -38,6 +38,7 @@ Change log
 
 - re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using for now)
 - add `getGridItems()` to return list of HTML grid items
+- add `{dragIn | dragInOptions}` grid attributes to handle external drag&drop items
 
 ## 1.1.2 (2020-05-17)
 

src/gridstack-dragdrop-plugin.ts

@@ -7,8 +7,9 @@
 */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import { GridStack } from './gridstack';
+import { GridStack, GridStackElement } from './gridstack';
 import { GridItemHTMLElement } from './types';
+import { DDDragInOpt } from '../dist/types';
 
 /** Drag&Drop drop options */
 export type DDDropOpt = {
@@ -48,6 +49,14 @@ export class GridStackDragDropPlugin {
     return this;
   }
 
+  public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDragDropPlugin {
+    return this;
+  }
+
+  public isDraggable(el: GridStackElement): boolean {
+    return false;
+  }
+
   public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     return this;
   }

src/gridstack.ts

@@ -187,6 +187,13 @@ export class GridStack {
         scroll: false,
         appendTo: 'body'
       },
+      dragIn: undefined,
+      dragInOptions : {
+        revert: 'invalid',
+        handle: '.grid-stack-item-content',
+        scroll: false,
+        appendTo: 'body'
+      },
       disableDrag: false,
       disableResize: false,
       rtl: 'auto',
@@ -283,6 +290,7 @@ export class GridStack {
     window.addEventListener('resize', this._onResizeHandler.bind(this));
     this._onResizeHandler();
 
+    this._setupDragIn();
     this._setupRemoveDrop();
     this._setupAcceptWidget();
   };
@@ -1481,6 +1489,16 @@ export class GridStack {
     return this;
   }
 
+  /** @internal call to setup dragging in from the outside (say toolbar), with options */
+  private _setupDragIn():  GridStack {
+    if (!this.opts.staticGrid && typeof this.opts.dragIn === 'string') {
+      if (!this.dd.isDraggable(this.opts.dragIn)) {
+        this.dd.dragIn(this.opts.dragIn, this.opts.dragInOptions);
+      }
+    }
+    return this;
+  }
+
   /** @internal called to setup a trash drop zone if the user specifies it */
   private _setupRemoveDrop(): GridStack {
     if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {

src/jq/jqueryui-gridstack-dragdrop-plugin.ts

@@ -6,9 +6,9 @@
  * gridstack.js may be freely distributed under the MIT license.
 */
 
-import { GridStack } from '../gridstack';
+import { GridStack, GridStackElement } from '../gridstack';
 import { GridStackDragDropPlugin, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dragdrop-plugin';
-import { GridItemHTMLElement } from '../types';
+import { GridItemHTMLElement, DDDragInOpt } 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
@@ -66,6 +66,12 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return this;
   }
 
+  public dragIn(el: GridStackElement, opts: DDDragInOpt): GridStackDragDropPlugin {
+    let $el: JQuery = $(el);
+    $el.draggable(opts);
+    return this;
+  }
+
   public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     if (typeof opts.accept === 'function' && !opts._accept) {
@@ -82,6 +88,11 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
     return Boolean($el.data('ui-droppable'));
   }
 
+  public isDraggable(el: GridStackElement): boolean {
+    let $el: JQuery = $(el);
+    return Boolean($el.data('ui-draggable'));
+  }
+
   public on(el: GridItemHTMLElement, name: string, callback: DDCallback): GridStackDragDropPlugin {
     let $el: JQuery = $(el);
     $el.on(name, (event, ui) => { callback(event as any, ui.draggable ? ui.draggable.get(0) : event.target) });
@@ -97,17 +108,3 @@ export class JQueryUIGridStackDragDropPlugin extends GridStackDragDropPlugin {
 
 // finally register ourself
 GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
-
-/* OLD code for reference
-function JQueryUIGridStackDragDropPlugin(grid) {
-  GridStack.DragDropPlugin.call(this, grid);
-}
-
-GridStack.DragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
-
-JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStack.DragDropPlugin.prototype);
-JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin;
-....
-scope.JQueryUIGridStackDragDropPlugin = JQueryUIGridStackDragDropPlugin;
-return JQueryUIGridStackDragDropPlugin;
-*/

src/types.ts

@@ -70,6 +70,12 @@ export interface GridstackOptions {
   /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null }) */
   draggable?: DDDragOpt;
 
+  /** allows to drag external items using this selector - see dragInOption. (default: undefined) */
+  dragIn?: string;
+
+  /** allows to drag external items using these options. (default?: { handle: '.grid-stack-item-content', revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }) */
+  dragInOptions?: DDDragInOpt;
+
   /** let user drag nested grid items out of a parent or not (default false) */
   dragOut?: boolean;
 
@@ -219,6 +225,12 @@ export interface DDDragOpt {
   /** parent constraining where item can be dragged out from (default: null = no constrain) */
   containment?: string;
 }
+export interface DDDragInOpt extends DDDragOpt {
+  /** used when draging item from the outside, and canceling (ex: 'invalid')*/
+  revert?: string;
+  /** helper function when dropping (ex: 'clone') */
+  helper?: string;
+}
 
 /**
  * internal descriptions describing the items in the grid