update nested example

- add button to create a subgrid with widgets inside
- add a draggable subgrid with widgets inside

Author: fredericrous

demo/nested.html

@@ -16,9 +16,23 @@ <h1>Nested grids demo</h1>
       Use v9.2 <b>sizeToContent:true</b> on first subgrid item parent to grow/shrink as needed, while leaving leaf green items unchanged.<br>
       Uses v3.1 API to load the entire nested grid from JSON.<br>
       Nested grids uses v5 <b>column:'auto'</b> to keep items same size during resize.</p>
-    <a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
+    <div style="display: flex; flex-direction: row; gap: 5px;">
+    <a class="btn btn-primary" onClick="addWidget()" href="#">Add Widget</a>
     <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 Widget With Nested Content</a>
+    <div style="width: 100px;">
+      <div
+          class="gridstack-add-widget grid-stack-item ui-draggable"
+          gs-h="2"
+          gs-w="2"
+          data-gs-drop="true"
+      >
+        <div class="grid-stack-item-content">drop a nested widget</div>
+      </div>
+    </div>
+    </div>
+    <br />
     <span>entire save/re-create:</span>
     <a class="btn btn-primary" onClick="save()" href="#">Save</a>
     <a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
@@ -55,6 +69,10 @@ <h1>Nested grids demo</h1>
         {x:5, y:0, w:3, h:4, subGridOpts: {children: sub2, id:'sub2_grid', class: 'sub2', ...subOptions}},
       ]
     };
+    // setup drag drop behavior
+    GridStack.setupDragIn('.gridstack-add-widget', {
+      helper: 'clone',
+    });
 
     // create and load it all from JSON above
     let grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
@@ -66,10 +84,15 @@ <h1>Nested grids demo</h1>
       addEvents(grid, grid.opts.id);
     })
 
-    function addNested() {
+    function addWidget() {
       grid.addWidget({x:0, y:100, content:"new item"});
     }
 
+    function addNested() {
+      let subAddNested = [ {w:1, h:1, content: 'hello'}, {w:1, h:1, y: 1, content: 'world'}];
+      grid.addWidget({x:0, y:100, w:1, h:2, sizeToContent: true, subGridOpts: {children: subAddNested, id:`grid-${Math.random()}`, class: 'sub1', ...subOptions}});
+    }
+
     function addNewWidget(selector) {
       let subGrid = document.querySelector(selector).gridstack;
       let node = {
@@ -83,13 +106,62 @@ <h1>Nested grids demo</h1>
       return false;
     };
 
+    //--- Drag and Drop Nested widget logic
+
+    // the definition of the new node to add on drag and drop
+    let nodeToAdd = {
+      w: 2,
+      h: 2,
+      ...subOptions,
+      subGridOpts: subOptions,
+      children: [
+        {
+          w: 1,
+          h: 1,
+          content: '1'
+        },
+        {
+          w: 1,
+          h: 1,
+          content: '2'
+        },
+      ],
+    }
+
+    // listener on add event: everytime a widget with data-gs-drop is dropped, a new subgrid is created
+    function addEventHandler (event, gridNodes) {
+      gridNodes.forEach((node) => {
+        // check if the added event was triggered by a drop
+        let isAddedByDrop = Boolean(node.el.getAttribute('data-gs-drop'));
+        if (isAddedByDrop) {
+          // clear the content of the node before applying the content of our widget to add
+          node.el.querySelector('.grid-stack-item-content').innerHTML = '';
+          // create a nested widget
+          let subgrid = node.grid.makeSubGrid(node.el, nodeToAdd, undefined, false);
+          // add a listener to the subgrid to allow widgets to be added into this newly created nested widget
+          subgrid.on('added', addEventHandler);
+        }
+        // remove the data-gs-drop attribute to clean the node and avoid adding a new subgrid when a widget is moved between nested grids
+        node.el.removeAttribute('data-gs-drop')
+      });
+    }
+    // add listener to the main grid
+    grid.on('added', addEventHandler);
+    // add listener to the already existing nested grids
+    document.querySelectorAll('.grid-stack-nested').forEach((subGrid) => {
+      subGrid.gridstack.on('added', addEventHandler);
+    });
+
+    //--- end of Drag and Drop Nested widget logic
+
     function save(content = true, full = true) {
       options = grid.save(content, full);
       console.log(options);
       // console.log(JSON.stringify(options));
     }
     function destroy(full = true) {
       if (full) {
+        grid.off('added');
         grid.destroy();
         grid = undefined;
       } else {
@@ -99,11 +171,11 @@ <h1>Nested grids demo</h1>
     function load(full = true) {
       if (full) {
         grid = GridStack.addGrid(document.querySelector('.container-fluid'), options);
+        grid.on('added', addEventHandler);
       } else {
         grid.load(options);
       }
     }
-
   </script>
 </body>
 </html>