grid.setupDragIn()

* add `GridStack.setupDragIn()` so user can update external
draggable after the grid has been created.
* you can pass in new selector and options, else it uses the grid last option values.
(called on during init() but may be needed when items change dynamically).
* safe to call multiple times and on already draggable items
* fix #1637

Author: adumesny

demo/two.html

@@ -87,15 +87,19 @@ <h1>Two grids demo</h1>
       cellHeight: 70,
       disableOneColumnMode: true,
       float: false,
-      dragIn: '.sidebar .grid-stack-item', // add draggable to class
-      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
+      // dragIn: '.sidebar .grid-stack-item', // add draggable to class
+      // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // drag-out delete class
       removeTimeout: 100,
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);
     grids[1].float(true);
 
+    // new 4.x static method instead of setting up options on every grid (never been per grid really but old options still work)
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' });
+    // GridStack.setupDragIn(); // will now work as well (cache last values)
+
     let items = [
       {x: 0, y: 0, w: 2, h: 2},
       {x: 3, y: 1, h: 2},

doc/CHANGES.md

@@ -55,6 +55,7 @@ Change log
 - handle mid point of dragged over items (>50%) rather than a new row/column and check for the most covered when multiple items collide.
 - fix [1617](https://github.com/gridstack/gridstack.js/issues/1617) FireFox DOM order issue. Thanks [@marcel-necker](https://github.com/marcel-necker)
 - add `drag | resize` events while dragging [1616](https://github.com/gridstack/gridstack.js/pull/1616). Thanks [@MrCorba](https://github.com/MrCorba)
+- add `GridStack.setupDragIn()` so user can update external draggable after the grid has been created [1637](https://github.com/gridstack/gridstack.js/issues/1637)
 
 ## 3.3.0 (2021-2-2)
 

doc/README.md

@@ -52,6 +52,7 @@ gridstack.js API
   - [save(saveContent = true): GridStackWidget[]](#savesavecontent--true-gridstackwidget)
   - [setAnimation(doAnimate)](#setanimationdoanimate)
   - [setStatic(staticValue)](#setstaticstaticvalue)
+  - [GridStack.setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt)](#gridstacksetupdragindragin-string-draginoptions-dddraginopt)
   - [update(el: GridStackElement, opts: GridStackWidget)](#updateel-gridstackelement-opts-gridstackwidget)
   - [willItFit(x, y, width, height, autoPosition)](#willitfitx-y-width-height-autoposition)
 - [Utils](#utils)
@@ -86,8 +87,12 @@ gridstack.js API
 - `disableDrag` - disallows dragging of widgets (default: `false`).
 - `disableOneColumnMode` - disables the onColumnMode when the grid width is less than minW (default: 'false')
 - `disableResize` - disallows resizing of widgets (default: `false`).
-- `dragIn` - specify the class of items that can be dragged into the grid (ex: dragIn: '.newWidget'
-- `dragInOptions` - options for items that can be dragged into the grid (ex: dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }
+- `dragIn` - specify the class of items that can be dragged into grids
+  * example: `dragIn: '.newWidget'`.
+  * **Note**: if you have multiple grids, it's best to call `GridStack.setupDragIn()` with same params as it only need to be done once.
+- `dragInOptions` - options for items that can be dragged into grids
+  * example `dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone', handle: '.grid-stack-item-content' }`
+  * **Note**: if you have multiple grids, it's best to call `GridStack.setupDragIn()` with same params as it only need to be done once.
 - `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body', containment: null}`)
 - `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
 - `float` - enable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
@@ -494,6 +499,15 @@ Toggle the grid static state.  Also toggle the `grid-stack-static` class.
 
 - `staticValue` - if `true` the grid becomes static.
 
+### GridStack.setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt)
+
+  * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+  * Called during `GridStack.init()` as options, but can also be called directly (last param are cached) in case the toolbar
+  * is dynamically create and needs to change later.
+  * `dragIn` string selector (ex: `'.sidebar .grid-stack-item'`)
+  * `dragInOptions` options - see `DDDragInOpt`. (default: `{revert: 'invalid', handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}`
+
+
 ### update(el: GridStackElement, opts: GridStackWidget)
 
 Parameters:

src/gridstack-dd.ts

@@ -328,15 +328,31 @@ GridStack.prototype._clearRemovingTimeout = function(el: GridItemHTMLElement): G
   return this;
 }
 
-/** @internal call to setup dragging in from the outside (say toolbar), with options */
-GridStack.prototype._setupDragIn = function():  GridStack {
-  if (!this.opts.staticGrid && typeof this.opts.dragIn === 'string') {
-    if (!GridStackDD.get().isDraggable(this.opts.dragIn)) {
-      GridStackDD.get().dragIn(this.opts.dragIn, this.opts.dragInOptions);
-    }
+/**
+ * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+ * Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar
+ * is dynamically create and needs to change later.
+ **/
+GridStack.setupDragIn = function(_dragIn?: string, _dragInOptions?: DDDragInOpt) {
+  // cache in the passed in values (form grid init?) so they don't have to resend them each time
+  if (_dragIn) {
+    dragIn = _dragIn;
+    dragInOptions = {...dragInDefaultOptions, ...(_dragInOptions || {})};
   }
-  return this;
+  if (typeof dragIn !== 'string') return;
+  let dd = GridStackDD.get();
+  Utils.getElements(dragIn).forEach(el => {
+    if (!dd.isDraggable(el)) dd.dragIn(el, dragInOptions);
+  });
 }
+let dragIn: string;
+let dragInOptions: DDDragInOpt;
+const dragInDefaultOptions: DDDragInOpt = {
+  revert: 'invalid',
+  handle: '.grid-stack-item-content',
+  scroll: false,
+  appendTo: 'body'
+};
 
 /** @internal prepares the element for drag&drop **/
 GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): GridStack {

src/gridstack.ts

@@ -9,7 +9,7 @@
 import { GridStackEngine } from './gridstack-engine';
 import { obsoleteOpts, obsoleteAttr, Utils, HeightData } from './utils';
 import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
-  GridStackNode, GridStackOptions, GridStackWidget, numberOrString, DDUIData } from './types';
+  GridStackNode, GridStackOptions, GridStackWidget, numberOrString, DDUIData, DDDragInOpt } from './types';
 import { GridStackDDI } from './gridstack-ddi';
 
 // export all dependent file as well to make it easier for users to just import the main file
@@ -70,13 +70,6 @@ const GridDefaults: GridStackOptions = {
     scroll: false,
     appendTo: 'body'
   },
-  dragIn: undefined,
-  dragInOptions : {
-    revert: 'invalid',
-    handle: '.grid-stack-item-content',
-    scroll: false,
-    appendTo: 'body'
-  },
   disableDrag: false,
   disableResize: false,
   rtl: 'auto',
@@ -147,6 +140,7 @@ export class GridStack {
     GridStack.getGridElements(selector).forEach(el => {
       if (!el.gridstack) {
         el.gridstack = new GridStack(el, {...options});
+        delete options.dragIn; delete options.dragInOptions; // only need to be done once (really a static global thing, not per grid)
       }
       grids.push(el.gridstack);
     });
@@ -357,7 +351,11 @@ export class GridStack {
       this.el.classList.add('grid-stack-' + this.opts.column);
     }
 
-    this._setupDragIn();
+    // legacy support to appear 'per grid` options when really global.
+    if (this.opts.dragIn) GridStack.setupDragIn(this.opts.dragIn, this.opts.dragInOptions);
+    delete this.opts.dragIn;
+    delete this.opts.dragInOptions;
+
     this._setupRemoveDrop();
     this._setupAcceptWidget();
     this._updateWindowResizeEvent();
@@ -1457,6 +1455,15 @@ export class GridStack {
    */
   /* eslint-disable @typescript-eslint/no-unused-vars */
 
+  /**
+   * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+   * Called during GridStack.init() as options, but can also be called directly (last param are cached) in case the toolbar
+   * is dynamically create and needs to change later.
+   * @param dragIn string selector (ex: '.sidebar .grid-stack-item')
+   * @param dragInOptions options - see DDDragInOpt. (default: {revert: 'invalid', handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}
+   **/
+  public static setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt): void { /* implemented in gridstack-dd.ts */ }
+
   /**
    * Enables/Disables moving. No-op for static grids.
    * @param els widget or selector to modify.
@@ -1503,6 +1510,7 @@ export class GridStack {
    * doEnable`s value by changing the disableResize grid option (default: true).
    */
   public enableResize(doEnable: boolean, includeNewWidgets = true): GridStack { return this }
+
   /** @internal called to add drag over support to support widgets */
   public _setupAcceptWidget(): GridStack { return this }
   /** @internal called to setup a trash drop zone if the user specifies it */
@@ -1511,8 +1519,6 @@ export class GridStack {
   public _setupRemovingTimeout(el: GridItemHTMLElement): GridStack { return this }
   /** @internal */
   public _clearRemovingTimeout(el: GridItemHTMLElement): GridStack { return this }
-  /** @internal call to setup dragging in from the outside (say toolbar), with options */
-  public _setupDragIn():  GridStack { return this }
   /** @internal prepares the element for drag&drop **/
   public _prepareDragDropByNode(node: GridStackNode): GridStack { return this }
   /** @internal handles actual drag/resize start **/