Create lesson example

example/src/App.vue

@@ -90,12 +90,25 @@ import NumberCounter from "./components/NumberCounter.vue";
         :rows="parseInt(lesson1Rows)"
         class="bordered"
         context="lesson"
+        grid-id="lesson-plan"
         @itemChanged="handleLessonMoved"
       >
         <template #item="item">
           <div class="container">{{ item }}</div>
         </template>
       </drag-grid>
+      <drag-grid
+        :value="lessons1"
+        :cols="1"
+        :rows="10"
+        context="lesson"
+        grid-id="lesson-storage"
+        @itemChanged="handleLessonDropInContainer"
+      >
+        <template #item="item">
+          <div class="container">{{ item }}</div>
+        </template>
+      </drag-grid>
     </div>
   </div>
 </template>
@@ -131,10 +144,18 @@ export default {
           this.lesson2X = lesson.x;
           this.lesson2Y = lesson.y;
           break;
+        case "lesson3":
+          this.lesson3X = lesson.x;
+          this.lesson3Y = lesson.y;
+          this.lesson3inPlan = true;
+          break;
         default:
           console.error("Something is wrong here!");
       }
     },
+    handleLessonDropInContainer(lesson) {
+      if (lesson.key === "lesson3") this.lesson3inPlan = false;
+    },
   },
   data() {
     return {
@@ -180,14 +201,21 @@ export default {
       lesson1Y: 1,
       lesson2X: 2,
       lesson2Y: 1,
+      lesson3X: -1,
+      lesson3Y: -1,
+      lesson3inPlan: false,
     };
   },
   computed: {
     lessons1() {
       return [
         {
-          x: this.lesson1X,
-          y: this.lesson1Y,
+          x: (grid) => {
+            return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
+          },
+          y: (grid) => {
+            return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
+          },
           w: 1,
           h: this.lesson1Length,
           key: "lesson1",
@@ -195,14 +223,34 @@ export default {
         },
         {
           x: (grid) => {
-            return grid.context === "lesson" ? this.lesson2X : 1;
+            return grid.gridId === "lesson-plan" ? this.lesson2X : 0;
+          },
+          y: (grid) => {
+            return grid.gridId === "lesson-plan" ? this.lesson2Y : 0;
           },
-          y: this.lesson2Y,
           w: 1,
           h: parseInt(this.lesson1Length) + 1,
           key: "lesson2",
           data: {},
         },
+        {
+          x: (grid) => {
+            if (this.lesson3inPlan) {
+              return grid.gridId === "lesson-plan" ? this.lesson3X : -1;
+            }
+            return grid.gridId === "lesson-plan" ? -1 : 0;
+          },
+          y: (grid) => {
+            if (this.lesson3inPlan) {
+              return grid.gridId === "lesson-plan" ? this.lesson3Y : -1;
+            }
+            return grid.gridId === "lesson-plan" ? -1 : 0;
+          },
+          w: 1,
+          h: parseInt(this.lesson1Length) + 1,
+          key: "lesson3",
+          data: {},
+        },
       ];
     },
   },