diff --git a/demo/nested.html b/demo/nested.html
index 9a313faf2..964027691 100644
--- a/demo/nested.html
+++ b/demo/nested.html
@@ -78,10 +78,7 @@ <h1>Nested grids demo</h1>
     })
 
     // setup drag drop behavior
-    let sidebarContent = [
-     { w:2, h:2, subGridOpts: { children: [{content: 'nest 1'}, {content: 'nest 2'}]}}
-    ];
-    GridStack.setupDragIn('.sidebar .grid-stack-item', undefined, sidebarContent);
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
 
     function addWidget() {
       grid.addWidget({x:0, y:100, content:"new item"});
@@ -116,7 +113,15 @@ <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
 
@@ -137,6 +142,7 @@ <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);
       }