@@ -78,10 +78,7 @@ <h1>Nested grids demo</h1>
78
78
} )
79
79
80
80
// 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' } ) ;
85
82
86
83
function addWidget ( ) {
87
84
grid . addWidget ( { x :0 , y :100 , content :"new item" } ) ;
@@ -116,7 +113,15 @@ <h1>Nested grids demo</h1>
116
113
n . el . querySelector ( '.grid-stack-item-content' ) . innerHTML = '' ;
117
114
let nodeToAdd = { children : [ { content : 'nest 1' } , { content : 'nest 2' } ] } ;
118
115
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 ) ;
119
119
}
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
+ } ) ;
120
125
121
126
//--- end of Drag and Drop Nested widget logic
122
127
@@ -137,6 +142,7 @@ <h1>Nested grids demo</h1>
137
142
function load ( full = true ) {
138
143
if ( full ) {
139
144
grid = GridStack . addGrid ( document . querySelector ( '.container-fluid' ) , options ) ;
145
+ grid . on ( 'dropped' , droppedHandler ) ;
140
146
} else {
141
147
grid . load ( options ) ;
142
148
}
0 commit comments