Merge pull request #2290 from adumesny/master

removed `GridStackOptions.dragInOptions` since `setupDragIn()`has it …

Author: adumesny

demo/static.html

@@ -36,9 +36,6 @@ <h1>Static vs can move/drag Demo</h1>
       cellHeight: 70,
       acceptWidgets: true,
       removable: true,
-      // old way, use global setupDragIn() instead
-      // dragIn: '.sidebar .grid-stack-item', // add draggable to class
-      // dragInOptions: { appendTo: 'body', helper: 'clone' },
       staticGrid: true
     });
     addEvents(grid);

demo/two.html

@@ -59,8 +59,6 @@ <h1>Two grids demo</h1>
       cellHeight: 70,
       disableOneColumnMode: true,
       float: true,
-      // dragIn: '.sidebar .grid-stack-item', // add draggable to class
-      // dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // true or drag-out delete class
       // itemClass: 'with-lines', // test a custom additional class #2110
       acceptWidgets: function(el) { return true } // function example, but can also be: true | false | '.someClass' value

demo/web2.html

@@ -61,10 +61,9 @@ <h1>Advanced Demo</h1>
     let grid = GridStack.init({
       cellHeight: 70,
       acceptWidgets: true,
-      dragIn: '.newWidget',  // class that can be dragged from outside
-      dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone or can be your function
       removable: '#trash', // drag-out delete class
     });
+    GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
 
     let items = [
       {x: 0, y: 0, w: 4, h: 2, content: '1'},

demo/website.html

@@ -371,13 +371,13 @@ <h1>Used by</h1>
     var advGrid = GridStack.init({
       margin: 5,
       acceptWidgets: true,
-      dragIn: '.newWidget',  // class that can be dragged from outside
-      dragInOptions: { appendTo: 'body', helper: 'clone' },
       removable: '#trash',
       removeTimeout: 100
-    }, '#advanced-grid');
-    advGrid.load(advanced);
+    }, '#advanced-grid')
+    .load(advanced);
 
+    GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
+
     $('#search').on('submit', function (event) {
       event.preventDefault();
       var searchTerm = $('#searchTerm').val();

doc/CHANGES.md

@@ -88,6 +88,7 @@ Change log
 * feat: [#2275](https://github.com/gridstack/gridstack.js/issues/2275) `setupDragIn()` now can take an array or elements (in addition to selector string) and optional parent root (for shadow DOM support)
 * fix: [#2234](https://github.com/gridstack/gridstack.js/issues/2234) `Utils.getElements('1')` (called by removeWidget() and others) now checks for digit 'selector' (becomes an id).
 * fix: [#2213](https://github.com/gridstack/gridstack.js/issues/2213) `destroy()` now removes event handlers too
+* break: (meant to be in v8) removed `GridStackOptions.dragInOptions` since `setupDragIn()`has it replaced since 4.0
 
 ## 8.0.0 (2023-04-29)
 * package is now ES2020 (TS exported files), webpack all.js still umd (better than commonjs for browsers), still have es5/ files unchanged (for now)

doc/README.md

@@ -96,13 +96,6 @@ gridstack.js API
 - `disableDrag` - disallows dragging of widgets (default: `false`).
 - `disableOneColumnMode` - Prevents the grid container from being displayed in "one column mode", even when the container's width is smaller than the value of oneColumnSize (default value of oneColumnSize is 768px). By default, this option is set to "false".
 - `disableResize` - disallows resizing of widgets (default: `false`).
-- `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 - see `DDDragInOpt`
-  * example `dragInOptions: { 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.
-  * **Note2**: instead of 'clone' you can also pass your own function (get passed the event).
 - `draggable` - allows to override draggable options - see `DDDragOpt`. (default: `{handle: '.grid-stack-item-content', appendTo: 'body', scroll: true}`)
 - `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
 - `engineClass` - the type of engine to create (so you can subclass) default to GridStackEngine
@@ -330,15 +323,15 @@ grids.forEach(...)
 * @param opt grids options used to initialize the grid, and list of children
 * see [nested.html](https://github.com/gridstack/gridstack.js/tree/master/demo/nested.html) demo
 
-### `setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt)`
+### `setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragInOpt, root = document)`
 
 * 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 dragIn string selector (ex: `'.sidebar .grid-stack-item'`) or list of dom elements
 * @param dragInOptions options - see `DDDragInOpt`. (default: `{handle: '.grid-stack-item-content', appendTo: 'body'}`
+* @param root - default to document (for shadow dom support)
 but you will probably also want `helper: 'clone'` or your own callback function).
 
-
 ### `GridStack.registerEngine(engineClass: typeof GridStackEngine)`
 
 * call to specify global custom engine subclass - see instead `GridStackOptions.engineClass` if you only need to replace just one instance.

spec/e2e/html/1143_nested_acceptWidget_types.html

@@ -49,8 +49,6 @@ <h3>show dragging into sub grid</h3>
     let grid = GridStack.init({ acceptWidgets: '.otherWidgetType' }, '.grid-stack.outer');
     let gridNest = GridStack.init({
       acceptWidgets: '.newWidget',
-      dragIn: '.newWidget', // class that can be dragged from outside
-      dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone or can be your function
       itemClass: 'sub',
     }, '.grid-stack.nested');
     gridNest.load([
@@ -61,6 +59,8 @@ <h3>show dragging into sub grid</h3>
       {x:0, y:1, w:3, content:'4'},
       {x:3, y:1, w:3, content:'5'},
     ]);
+
+    GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
 
     grid.on('added removed change', function(e, items) {
       let str = '';

spec/e2e/html/1419-maxrow1-cant-insert.html

@@ -61,11 +61,10 @@
     let options = {
       row: 1,
       cellHeight: 120,
-      dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
-      dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone or can be your function
       acceptWidgets: true
     };
     let grid = GridStack.init(options);
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
     addEvents(grid);
     grid.addWidget({x: 0});
   </script>

spec/e2e/html/1571_drop_onto_full.html

@@ -86,11 +86,11 @@ <h1>drop onto full</h1>
       cellHeight: 70,
       disableOneColumnMode: true,
       float: false,
-      dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
-      dragInOptions: { appendTo: 'body', helper: 'clone' }, // clone or can be your function
       removable: '.trash', // drag-out delete class
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
+
     let grids = GridStack.initAll(options);
     grids[0].load([{x: 4, y: 0, w: 1, h: 1}])
     grids[1].load([{x: 0, y: 0, w: 6, h: 1}])

spec/e2e/html/1704_scroll_bar.html

@@ -36,17 +36,12 @@
   <script type="text/javascript">
     let grids = GridStack.initAll({
       acceptWidgets: true,
-      dragIn: ".newWidget", // class that can be dragged from outside
-      dragOut: false,
-      dragInOptions: {
-        appendTo: "body",
-        helper: "clone"
-      },
       removable: "#trash", // drag-out delete class
       removeTimeout: 100,
       float: true,
       row: 3,
     });
+    GridStack.setupDragIn('.newWidget', { appendTo: 'body', helper: 'clone' });
     // let items = [{x: 0, y: 0, content: "0"}];
     // grids.forEach(grid => grid.load(items));
   </script>