H5: fix dragInOption clone: myFunc()

* fixed h5 case when helper is function to correctly call it with event
* updated two.html (and jq) demos to show it.

Author: adumesny

demo/two-jq.html

@@ -89,14 +89,18 @@ <h1>Two grids demo (Jquery version)</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
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
     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 works
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: myClone });
+    // GridStack.setupDragIn(); // second call will now work (cache last values)
+
     let items = [
       {x: 0, y: 0, w: 2, h: 2},
       {x: 3, y: 1, h: 2},
@@ -110,6 +114,12 @@ <h1>Two grids demo (Jquery version)</h1>
       grid.load(items);
     });
   });
+
+  // decide what the dropped item will be - for now just a clone but can be anything
+  function myClone(event) {
+    return event.target.cloneNode(true);
+  }
+
   function toggleFloat(button, i) {
     grids[i].float(! grids[i].getFloat());
     button.innerHTML = 'float: ' + grids[i].getFloat();

demo/two.html

@@ -96,7 +96,7 @@ <h1>Two grids demo</h1>
     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 works
-    GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' });
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: myClone });
     // GridStack.setupDragIn(); // second call will now work (cache last values)
 
     let items = [
@@ -112,6 +112,11 @@ <h1>Two grids demo</h1>
       grid.load(items);
     });
 
+    // decide what the dropped item will be - for now just a clone but can be anything
+    function myClone(event) {
+      return event.target.cloneNode(true);
+    }
+
     function toggleFloat(button, i) {
       grids[i].float(! grids[i].getFloat());
       button.innerHTML = 'float: ' + grids[i].getFloat();

demo/web2.html

@@ -60,7 +60,7 @@ <h1>Advanced Demo</h1>
       cellHeight: 70,
       acceptWidgets: true,
       dragIn: '.newWidget',  // class that can be dragged from outside
-      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
+      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone or can be your function
       removable: '#trash', // drag-out delete class
     });
 

doc/CHANGES.md

@@ -53,6 +53,7 @@ Change log
 ## 4.0.1-dev
 
 - fix [#1658](https://github.com/gridstack/gridstack.js/issues/1658) `enableMove(T/F)` not working correctly
+- fix `helper: myFunction` now working for H5 case for `dragInOptions` & `setupDragIn()`
 ## 4.0.1 (2021-3-20)
 
 - fix [#1669](https://github.com/gridstack/gridstack.js/issues/1669) JQ resize broken

doc/README.md

@@ -96,6 +96,7 @@ gridstack.js API
 - `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.
+  * **Note2**: instead of 'clone' you can also pass your own function (get passed the event).
 - `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)
@@ -317,6 +318,7 @@ grids.forEach(...)
 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'}`
+but you will probably also want `helper: 'clone'` or your own callback function).
 
 ## API
 

spec/e2e/html/1143_nested_acceptWidget_types.html

@@ -50,7 +50,7 @@ <h3>show dragging into sub grid</h3>
     let gridNest = GridStack.init({
       acceptWidgets: '.newWidget',
       dragIn: '.newWidget', // class that can be dragged from outside
-      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
+      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone or can be your function
       itemClass: 'sub',
     }, '.grid-stack.nested');
     gridNest.load([

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

@@ -62,7 +62,7 @@
       row: 1,
       cellHeight: 120,
       dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
-      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
+      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone or can be your function
       acceptWidgets: true
     };
     let grid = GridStack.init(options);

spec/e2e/html/1571_drop_onto_full.html

@@ -87,7 +87,7 @@ <h1>drop onto full</h1>
       disableOneColumnMode: true,
       float: false,
       dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
-      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
+      dragInOptions: { revert: 'invalid', scroll: false, 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
     };

spec/e2e/html/1658_enableMove.html

@@ -4,15 +4,15 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Float grid demo</title>
+  <title>enableMove demo</title>
 
   <link rel="stylesheet" href="../../../demo/demo.css"/>
   <script src="../../../dist/gridstack-h5.js"></script>
 
 </head>
 <body>
   <div class="container-fluid">
-    <h1>Float grid demo</h1>
+    <h1>enableMove() demo</h1>
     <div>
       <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
       <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>

src/h5/dd-draggable.ts

@@ -196,7 +196,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   private _createHelper(event: DragEvent): HTMLElement {
     let helper = this.el;
     if (typeof this.option.helper === 'function') {
-      helper = this.option.helper.apply(this.el, event);
+      helper = this.option.helper(event);
     } else if (this.option.helper === 'clone') {
       helper = DDUtils.clone(this.el);
     }