fixed sidebar for nested grids

* fixed nested example to use latest code (remove a bunch)
* fixed GS to support subGridOpts

Author: adumesny

demo/nested.html

@@ -21,12 +21,8 @@ <h1>Nested grids demo</h1>
       <a class="btn btn-primary" onClick="addNewWidget('.sub1')" href="#">Add Widget Grid1</a>
       <a class="btn btn-primary" onClick="addNewWidget('.sub2')" href="#">Add Widget Grid2</a>
       <a class="btn btn-primary" onClick="addNested()" href="#">Add Nested Grid</a>
-      <div class="sidebar" style="height:50px; padding: 0">
-        <!-- manually force a drop size of 2x2 for nested size -->
-        <div class="grid-stack-item" gs-w="2" gs-h="2">
-          <div class="grid-stack-item-content">Drag nested</div>
-        </div>
-      </div>  
+      <!-- add .grid-stack-item for acceptWidgets:true -->
+      <div class="sidebar-item grid-stack-item">Drag nested</div>
     </div>
     <br />
     <span>entire save/re-create:</span>
@@ -78,7 +74,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-item', undefined, sidebarContent);
 
     function addWidget() {
       grid.addWidget({x:0, y:100, content:"new item"});
@@ -104,25 +103,6 @@ <h1>Nested grids demo</h1>
       return false;
     };
 
-    // listener on drop event: every time the sidebar item is dropped create a new subgrid
-    function droppedHandler(event, prevNode, n) {
-      // if we don't have a prevNode that means it came from toolbar, which today is the only nested case (else check for some node.el.getAttribute or some custom field...)
-      if (prevNode) return;
-
-      // clear the content then make it a subgrid
-      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
 
     function save(content = true, full = true) {
@@ -142,7 +122,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

@@ -23,6 +23,7 @@ <h1>Two grids demo</h1>
 
     <div class="row">
       <div class="col-md-8">
+        <!-- NOTE: add .grid-stack-item for acceptWidgets:true, but not needed for function which handles .sidebar-item -->
         <div class="sidebar">
           <!-- will size to match content. Also see sidebarContent -->
           <div class="sidebar-item">Drag me</div>

src/gridstack.ts

@@ -2249,7 +2249,7 @@ export class GridStack {
         if (node?.grid === this && !node._isExternal) return false;
 
         const wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
-        const wasSidebar = node._isExternal;
+        const wasSidebar = el !== helper;
         this.placeholder.remove();
 
         // disable animation when replacing a placeholder (already positioned) with actual content
@@ -2296,13 +2296,15 @@ export class GridStack {
         // give the user a chance to alter the widget that will get inserted if new sidebar item
         if (wasSidebar) {
           if (GridStack.addRemoveCB) el = GridStack.addRemoveCB(this.el, node, true, false);
-          else if (node.content) el = Utils.createWidgetDivs(undefined, node); // calls GridStack.renderCB()
+          else if (node.content || node.subGridOpts) el = Utils.createWidgetDivs(undefined, node); // calls GridStack.renderCB()
         }
         this._prepareElement(el, true, node);
         this.el.appendChild(el);
         if (subGrid) {
           subGrid.parentGridItem = node;
           if (!subGrid.opts.styleInHead) subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
+        } else if (wasSidebar && node.subGridOpts) {
+          this.makeSubGrid(node.el, undefined, undefined, !!node.content);
         }
         this._updateContainerHeight();
         this.engine.addedNodes.push(node);