@@ -78,10 +78,7 @@ <h1>Nested grids demo</h1>
7878 } )
7979
8080 // setup drag drop behavior
81- let sidebarContent = [
82- { w :2 , h :2 , subGridOpts : { children : [ { content : 'nest 1' } , { content : 'nest 2' } ] } }
83- ] ;
84- GridStack . setupDragIn ( '.sidebar .grid-stack-item' , undefined , sidebarContent ) ;
81+ GridStack . setupDragIn ( '.sidebar .grid-stack-item' , { appendTo : 'body' , helper : 'clone' } ) ;
8582
8683 function addWidget ( ) {
8784 grid . addWidget ( { x :0 , y :100 , content :"new item" } ) ;
@@ -116,7 +113,15 @@ <h1>Nested grids demo</h1>
116113 n . el . querySelector ( '.grid-stack-item-content' ) . innerHTML = '' ;
117114 let nodeToAdd = { children : [ { content : 'nest 1' } , { content : 'nest 2' } ] } ;
118115 let subgrid = n . grid . makeSubGrid ( n . el , nodeToAdd , undefined , false ) ;
116+
117+ // add a listener to the subgrid to allow widgets to be added into this newly created nested widget
118+ subgrid . on ( 'dropped' , droppedHandler ) ;
119119 }
120+ // add listener to the main grid and subgrids
121+ grid . on ( 'dropped' , droppedHandler ) ;
122+ document . querySelectorAll ( '.grid-stack-nested' ) . forEach ( ( subGrid ) => {
123+ subGrid . gridstack . on ( 'dropped' , droppedHandler ) ;
124+ } ) ;
120125
121126 //--- end of Drag and Drop Nested widget logic
122127
@@ -137,6 +142,7 @@ <h1>Nested grids demo</h1>
137142 function load ( full = true ) {
138143 if ( full ) {
139144 grid = GridStack . addGrid ( document . querySelector ( '.container-fluid' ) , options ) ;
145+ grid . on ( 'dropped' , droppedHandler ) ;
140146 } else {
141147 grid . load ( options ) ;
142148 }
0 commit comments