demo update to V11

Author: adumesny

demo/web1.html

@@ -28,11 +28,7 @@ <h1>Web demo 1</h1>
       el.innerHTML = w.content;
     };
 
-    let grid = GridStack.init({
-      cellHeight: 70,
-    });
-
-    let items = [
+    let children = [
       {x: 0, y: 0, w: 4, h: 2, content: '1'},
       {x: 4, y: 0, w: 4, h: 4, content: '2'},
       {x: 8, y: 0, w: 2, h: 2, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">'},
@@ -45,8 +41,8 @@ <h1>Web demo 1</h1>
       {x: 8, y: 4, w: 2, h: 2, content: '10'},
       {x: 10, y: 4, w: 2, h: 2, content: '11'},
     ];
-    grid.load(items);
-    
+
+    let grid = GridStack.init({ cellHeight: 70, children });
     grid.on('added removed change', function(e, items) {
       let str = '';
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });

demo/web2.html

@@ -22,8 +22,17 @@
       opacity: 0.8;
       filter: blur(5px);
     }
+    .sidepanel-item {
+      background-color: #18bc9c;
+      text-align: center;
+      padding: 5px;
+      margin-bottom: 15px;
+    }
     #trash {
-      background: rgba(255, 0, 0, 0.4);
+      background-color: rgba(255, 0, 0, 0.4);
+    }
+    ion-icon {
+      font-size: 300%;
     }
   </style>
 </head>
@@ -32,23 +41,13 @@
   <h1>Advanced Demo</h1>
   <div class="row">
     <div class="sidepanel col-md-2 d-none d-md-block">
-      <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
-        <div>
-          <ion-icon name="trash" style="font-size: 300%"></ion-icon>
-        </div>
-        <div>
-          <span>Drop here to remove!</span>
-        </div>
+      <div id="trash" class="sidepanel-item">
+        <ion-icon name="trash"></ion-icon>
+        <div>Drop here to remove!</div>
       </div>
-      <div class="grid-stack-item" gs-h="2">
-        <div class="grid-stack-item-content" style="padding: 5px;">
-          <div>
-            <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
-          </div>
-          <div>
-            <span>Drag me in the dashboard!</span>
-          </div>
-        </div>
+      <div class="grid-stack-item sidepanel-item">
+        <ion-icon name="add-circle"></ion-icon>
+        <div>Drag me in the dashboard!</div>
       </div>
     </div>
     <div class="col-sm-12 col-md-10">
@@ -62,17 +61,10 @@ <h1>Advanced Demo</h1>
       el.innerHTML = w.content;
     };
 
-    let grid = GridStack.init({
-      cellHeight: 70,
-      acceptWidgets: true,
-      removable: '#trash', // drag-out delete class
-    });
-    GridStack.setupDragIn('.sidepanel>.grid-stack-item');
-
-    let items = [
+    let children = [
       {x: 0, y: 0, w: 4, h: 2, content: '1'},
-      {x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
-      {x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
+      {x: 4, y: 0, w: 4, h: 4, locked: true, content: 'I can\'t be moved or dragged, nor pushed by others!<br><ion-icon name="ios-lock"></ion-icon>'},
+      {x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
       {x: 10, y: 0, w: 2, h: 2, content: '4'},
       {x: 0, y: 2, w: 2, h: 2, content: '5'},
       {x: 2, y: 2, w: 2, h: 4, content: '6'},
@@ -82,7 +74,15 @@ <h1>Advanced Demo</h1>
       {x: 8, y: 4, w: 2, h: 2, content: '10'},
       {x: 10, y: 4, w: 2, h: 2, content: '11'},
     ];
-    grid.load(items);
+    let insert = [ {h: 2, content: 'new item'}];
+
+    let grid = GridStack.init({
+      cellHeight: 70,
+      acceptWidgets: true,
+      removable: '#trash', // drag-out delete class
+      children
+    });
+    GridStack.setupDragIn('.sidepanel>.grid-stack-item', undefined, insert);
 
     grid.on('added removed change', function(e, items) {
       let str = '';