Merge pull request #2813 from adumesny/master

big sidepanel drag&drop helper rewrite

Author: adumesny

README.md

@@ -463,9 +463,12 @@ breaking change:
 
 ## Migrating to v11
 
-All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS. we now create DIV directly or use `el.textContent = w.content` for `GridStackWidget.content` field.
+* All instances of `el.innerHTML = 'some content'` have been removed for security reason as it opens up some potential for accidental XSS.
+
+* Side panel drag&drop complete rewrite.
+
+**breaking change:**
 
-breaking change:
 * if you code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
 ```ts
 // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
@@ -476,6 +479,13 @@ GridStack.renderCB = function(el, w) {
 * V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks.
 * `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`Util.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
 
+* BIG overall to how sidepanel helper drag&drop is done:
+1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so can clone or set attr at the top.
+2. use any class/structure you want for side panel items (see two.html)
+3. `GridStack.setupDragIn()` now support associating a `GridStackWidget` for each sidepanel that will be used to define what to create on drop!
+4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.
+5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives.
+
 # jQuery Application
 
 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before

demo/demo.css

@@ -23,10 +23,29 @@ h1 {
   margin-bottom: .5rem;
 }
 
+.sidebar {
+  background: rgb(215, 243, 215);
+  padding: 25px 0;
+  height: 100px;
+  text-align: center;
+}
+.sidebar > .grid-stack-item,
+.sidebar-item {
+  width: 100px;
+  height: 50px;
+  border: 2px dashed green;
+  text-align: center;
+  line-height: 35px;
+  background: rgb(192, 231, 192);
+  cursor: default;
+  display: inline-block;
+}
+
 .grid-stack {
   background: #FAFAD2;
 }
 
+.sidebar > .grid-stack-item,
 .grid-stack-item-content {
   text-align: center;
   background-color: #18bc9c;
@@ -39,25 +58,6 @@ h1 {
   height: 100px;
   background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
 }
-.sidebar {
-  background: rgba(0, 255, 0, 0.1);
-  padding: 25px 0;
-  height: 100px;
-  text-align: center;
-}
-.sidebar .grid-stack-item {
-  width: 120px;
-  height: 50px;
-  border: 2px dashed green;
-  text-align: center;
-  line-height: 35px;
-  background: rgba(0, 255, 0, 0.1);
-  cursor: default;
-  display: inline-block;
-}
-.sidebar .grid-stack-item .grid-stack-item-content {
-  background: none;
-}
 
 /* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
 .grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {

demo/nested.html

@@ -78,7 +78,10 @@ <h1>Nested grids demo</h1>
     })
 
     // setup drag drop behavior
-    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
+    let sidebarContent = [
+     { w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}}
+    ];
+    GridStack.setupDragIn('.sidebar .grid-stack-item', undefined, sidebarContent);
 
     function addWidget() {
       grid.addWidget({x:0, y:100, content:"new item"});
@@ -113,15 +116,7 @@ <h1>Nested grids demo</h1>
       n.el.querySelector('.grid-stack-item-content').innerHTML = '';
       let nodeToAdd = { children: [{content: 'nest 1'}, {content: 'nest 2'}]};
       let subgrid = n.grid.makeSubGrid(n.el, nodeToAdd, undefined, false);
-      
-      // add a listener to the subgrid to allow widgets to be added into this newly created nested widget
-      subgrid.on('dropped', droppedHandler);
     }
-    // add listener to the main grid and subgrids
-    grid.on('dropped', droppedHandler);
-    document.querySelectorAll('.grid-stack-nested').forEach((subGrid) => {
-      subGrid.gridstack.on('dropped', droppedHandler);
-    });
 
     //--- end of Drag and Drop Nested widget logic
 
@@ -142,7 +137,6 @@ <h1>Nested grids demo</h1>
     function load(full = true) {
       if (full) {
         grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
-        grid.on('dropped', droppedHandler);
       } else {
         grid.load(options);
       }

demo/two.html

@@ -22,19 +22,26 @@ <h1>Two grids demo</h1>
     <br>New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.</p>
 
     <div class="row">
-      <div class="col-md-3">
+      <div class="col-md-8">
         <div class="sidebar">
-          <!-- will size to match content -->
-          <div class="grid-stack-item">
-            <div class="grid-stack-item-content">Drag me</div>
+          <!-- will size to match content. Also see sidebarContent -->
+          <div class="sidebar-item">Drag me</div>
+          <!-- constrained in code using GridStackWidget[] sidebarContent -->
+          <div class="sidebar-item">2x1, max=3</div>
+          <!-- DOM JSON spelling GridStackWidget. NOTE: require content:'xyz' to work and RenderCB() to render -->
+          <div class="sidebar-item" gridstacknode='{"w":3, "content":"w:3"}'>w:3</div>
+          <!-- DOM id handled by myClone() case -->
+          <div class="sidebar-item" gs-id="manual">gs-id case</div>
+          <!-- DOM require proper GS format to be dropped as is without GridStackWidget above -->
+          <div class="grid-stack-item" gs-w="3">
+            <div class="grid-stack-item-content">DOM gs-w:3</div>
           </div>
-          <!-- manually force a drop size of 2x1 -->
-          <div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
-            <div class="grid-stack-item-content">2x1, max=3</div>
+          <div class="grid-stack-item" gridstacknode='{"w":2}'>
+            <div class="grid-stack-item-content">DOM w:2</div>
           </div>
         </div>
       </div>
-      <div class="col-md-9">
+      <div class="col-md-4">
         <div class="trash" id="trash">
         </div>
       </div>
@@ -55,41 +62,54 @@ <h1>Two grids demo</h1>
   </div>
   <script src="events.js"></script>
   <script type="text/javascript">
+    let items = [
+      {x: 0, y: 0, w: 2, h: 2},
+      {x: 1, y: 1, h: 2}, // intentional overlap to test collision on load
+      {x: 1, y: 1}, // intentional overlap to test collision on load
+      {x: 3, y: 1},
+      {x: 2, y: 3, w: 3, maxW: 3, content: 'has maxW=3'},
+      {x: 2, y: 5}
+    ];
+    items.forEach((item, i) => item.content = item.content || String(i));
+
+    // sidebar content to create when we get dropped, instead of inserting the clone version
+    let sidebarContent = [
+      {content: 'dropped'},
+      {content: 'max=3', w:2, h:1, maxW: 3},
+    ];
+
     let options = {
       column: 6,
       minRow: 1, // don't collapse when empty
       cellHeight: 70,
       float: true,
       removable: '.trash', // true or drag-out delete class
+      children: items,
       // itemClass: 'with-lines', // test a custom additional class #2110
       acceptWidgets: function(el) { return true } // function example, but can also be: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);
     grids[1].float(false);
 
-    // new 4.x static method instead of setting up options on every grid (never been per grid really)
-    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: myClone });
+    // new v4 static method instead of setting up options on every grid (never been per grid really)
+    // new v11 method takes GridStackWidget[] to specify what to create on drop
+    // NOTE: helper:'clone' is default and typically used but have custom logic here to showcase
+    // NOTE2: handle not set to drag entire self.
+    GridStack.setupDragIn('.sidebar-item, .sidebar>.grid-stack-item', { helper: myClone }, sidebarContent);
     // GridStack.setupDragIn(); // second call will now work (cache last values)
 
-    let items = [
-      {x: 0, y: 0, w: 2, h: 2},
-      {x: 1, y: 1, h: 2}, // intentional overlap to test collision on load
-      {x: 1, y: 1}, // intentional overlap to test collision on load
-      {x: 3, y: 1},
-      {x: 2, y: 3, w: 3, maxW: 3, content: 'has maxW=3'},
-      {x: 2, y: 5}
-    ];
-    items.forEach((item, i) => item.content = item.content || String(i));
-
     grids.forEach(function (grid, i) {
       addEvents(grid, i);
-      grid.load(items);
     });
 
-    // decide what the dropped item will be - for now just a clone but can be anything
-    function myClone(event) {
-      const el = event.target.cloneNode(true);
-      el.setAttribute('gs-id', 'foo'); // TEST why clone element is not used directly on drop #2231
+    // clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used.
+    function myClone(el) {
+      if (el.getAttribute('gs-id') === 'manual') {
+        return GridStack.Utils.createWidgetDivs(undefined, {w:2, content:'manual'}); // RenderCB() will be called
+      }
+      el = el.cloneNode(true);
+      // el.setAttribute('gs-id', 'foo'); // help debug #2231
+      // el.innerHTML = 'cloned'; // help debug
       return el;
     }
 

doc/CHANGES.md

@@ -116,6 +116,8 @@ Change log
 
 ## 11.0.0 (TBD)
 * fix: [#2736](https://github.com/gridstack/gridstack.js/bug/2736) safe practices around GridStackWidget.content no longer setting innerHTML
+* fix: [#2231](https://github.com/gridstack/gridstack.js/bug/2231),[#1840](https://github.com/gridstack/gridstack.js/bug/1840),[#2354](https://github.com/gridstack/gridstack.js/bug/2354)
+big overall to how we do sidepanel drag&drop helper. see release notes.
 
 ## 10.3.1 (2024-07-21)
 * fix: [#2734](https://github.com/gridstack/gridstack.js/bug/2734) rotate() JS error

doc/README.md

@@ -9,7 +9,6 @@ gridstack.js API
   - [Responsive](#responsive)
     - [Breakpoint](#breakpoint)
   - [DDDragOpt](#dddragopt)
-  - [DDDragInOpt extends DDDragOpt](#dddraginopt-extends-dddragopt)
 - [Grid attributes](#grid-attributes)
 - [Item Options](#item-options)
 - [Item attributes](#item-attributes)
@@ -30,7 +29,7 @@ gridstack.js API
   - [`init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack`](#initoptions-gridstackoptions---elorstring-gridstackelement--grid-stack-gridstack)
   - [`initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[]`](#initalloptions-gridstackoptions---selector--grid-stack-gridstack)
   - [`addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack `](#addgridparent-htmlelement-opt-gridstackoptions---gridstack-)
-  - [`setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragInOpt, root = HTMLElement | Document)`](#setupdragindragin-string--htmlelement-draginoptions-dddraginopt-root--htmlelement--document)
+  - [`setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragOpt, widgets?: GridStackWidget[], root = HTMLElement | Document)`](#setupdragindragin-string--htmlelement-draginoptions-dddragopt-widgets-gridstackwidget-root--htmlelement--document)
   - [`GridStack.registerEngine(engineClass: typeof GridStackEngine)`](#gridstackregisterengineengineclass-typeof-gridstackengine)
 - [API](#api)
   - [`addWidget(w: GridStackWidget): GridItemHTMLElement`](#addwidgetw-gridstackwidget-griditemhtmlelement)
@@ -147,9 +146,7 @@ v10.x supports a much richer responsive behavior, you can have breakpoints of wi
 - `pause`?: boolean | number - if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global
 - `scroll`?: boolean - default to 'true', enable or disable the scroll when an element is dragged on bottom or top of the grid.
 - `cancel`?: string - prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option'
-
-### DDDragInOpt extends DDDragOpt
-- `helper`?: 'clone' | ((event: Event) => HTMLElement) - helper function when dropping (ex: 'clone' or your own method)
+- `helper`?: 'clone' | ((el: HTMLElement) => HTMLElement) - helper function when dragging side panel items that need to be cloned before dropping (ex: 'clone' or your own method)
 
 ## Grid attributes
 
@@ -341,14 +338,14 @@ 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 | HTMLElement[], dragInOptions?: DDDragInOpt, root = HTMLElement | Document)`
+### `setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragOpt, widgets?: GridStackWidget[], root = HTMLElement | 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'`) 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 pass the parent container.
-but you will probably also want `helper: 'clone'` or your own callback function).
+* @param `dragIn` string selector (ex: `'.sidebar-item'`) or list of dom elements
+* @param `dragInOptions` options - see `DDDragOpt`. default: `{appendTo: 'body', helper: 'clone'}`
+* @param `widgets` GridStackWidget def to assign to each element which defines what to create on drop
+* @param `root` optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
 
 ### `GridStack.registerEngine(engineClass: typeof GridStackEngine)`