Create example for raw items

example/src/App.vue

@@ -132,6 +132,68 @@ import NumberCounter from "./components/NumberCounter.vue";
         </template>
       </drag-grid>
     </div>
+    <div class="ttt-container">
+      <drag-grid
+        :value="colorGrid"
+        :cols="4"
+        :rows="4"
+        grid-id="gridA"
+        context="colors"
+        class="bordered color-grid"
+        @itemChanged="handleColorItemChange"
+      >
+        <template #item="item">
+          <div
+            :style="{
+              background: item.rawItem.getColor('red'),
+              color: 'white',
+            }"
+          >
+            {{ item.data.name }}
+          </div>
+        </template>
+      </drag-grid>
+      <drag-grid
+        :value="colorGrid"
+        :cols="4"
+        :rows="4"
+        grid-id="gridB"
+        context="colors"
+        class="bordered color-grid"
+        @itemChanged="handleColorItemChange"
+      >
+        <template #item="item">
+          <div
+            :style="{
+              background: item.rawItem.getColor('green'),
+              color: 'black',
+            }"
+          >
+            {{ item.data.name }}
+          </div>
+        </template>
+      </drag-grid>
+      <drag-grid
+        :value="colorGrid"
+        :cols="4"
+        :rows="4"
+        grid-id="gridC"
+        context="colors"
+        class="bordered color-grid"
+        @itemChanged="handleColorItemChange"
+      >
+        <template #item="item">
+          <div
+            :style="{
+              background: item.rawItem.getColor('red'),
+              color: 'white',
+            }"
+          >
+            {{ item.data.name }}
+          </div>
+        </template>
+      </drag-grid>
+    </div>
   </div>
 </template>
 
@@ -178,6 +240,48 @@ export default {
     handleLessonDropInContainer(lesson) {
       if (lesson.key === "lesson3") this.lesson3inPlan = false;
     },
+    contains(array, search) {
+      return array.filter((obj) => obj === search).length > 0;
+    },
+    findAndRemove(array, element) {
+      let index = array.findIndex((i) => {
+        return i === element;
+      });
+      if (index >= 0) array.splice(index, 1);
+    },
+    handleColorItemChange(item) {
+      this[item.key].x = item.x;
+      this[item.key].y = item.y;
+
+      if (item.gridId === item.originGridId) return;
+
+      switch (item.gridId) {
+        case "gridA":
+          // Moved to gridA
+          this.findAndRemove(
+            item.originGridId === "gridB" ? this.placedB : this.placedC,
+            item.key
+          );
+          this.placedA.push(item.key);
+          break;
+        case "gridB":
+          // Moved to gridB
+          this.findAndRemove(
+            item.originGridId === "gridA" ? this.placedA : this.placedC,
+            item.key
+          );
+          this.placedB.push(item.key);
+          break;
+        case "gridC":
+          // Moved to gridC
+          this.findAndRemove(
+            item.originGridId === "gridB" ? this.placedB : this.placedA,
+            item.key
+          );
+          this.placedC.push(item.key);
+          break;
+      }
+    },
   },
   data() {
     return {
@@ -234,6 +338,33 @@ export default {
           outside: "This is lesson3 outside of the plan",
         },
       },
+      placedA: ["item1", "item2"],
+      placedB: ["item3", "item4"],
+      placedC: ["item5", "item6"],
+      item1: {
+        x: 1,
+        y: 1,
+      },
+      item2: {
+        x: 2,
+        y: 2,
+      },
+      item3: {
+        x: 1,
+        y: 1,
+      },
+      item4: {
+        x: 3,
+        y: 3,
+      },
+      item5: {
+        x: 2,
+        y: 4,
+      },
+      item6: {
+        x: 4,
+        y: 2,
+      },
     };
   },
   computed: {
@@ -294,6 +425,67 @@ export default {
         },
       ];
     },
+    colorGrid() {
+      let items = ["item1", "item2", "item3", "item4", "item5", "item6"];
+      let greens = [
+        "green",
+        "seagreen",
+        "greenyellow",
+        "darkolivegreen",
+        "limegreen",
+        "palegreen",
+      ];
+      let reds = [
+        "darkred",
+        "indianred",
+        "orangered",
+        "red",
+        "maroon",
+        "firebrick",
+      ];
+      return items.map((itemName) => {
+        return {
+          key: itemName,
+          x: (grid) => {
+            if (grid.gridId === "gridA") {
+              return this.contains(this.placedA, itemName)
+                ? this[itemName].x
+                : -1;
+            } else if (grid.gridId === "gridB") {
+              return this.contains(this.placedB, itemName)
+                ? this[itemName].x
+                : -1;
+            } else {
+              // gridC
+              return this.contains(this.placedC, itemName) ? 0 : -1;
+            }
+          },
+          y: (grid) => {
+            if (grid.gridId === "gridA") {
+              return this.contains(this.placedA, itemName)
+                ? this[itemName].y
+                : -1;
+            } else if (grid.gridId === "gridB") {
+              return this.contains(this.placedB, itemName)
+                ? this[itemName].y
+                : -1;
+            } else {
+              // gridC
+              return this.contains(this.placedC, itemName) ? 0 : -1;
+            }
+          },
+          w: 1,
+          h: 1,
+          data: {
+            name: itemName,
+          },
+          getColor: (a) =>
+            a === "red"
+              ? reds[parseInt(itemName[4]) - 1]
+              : greens[parseInt(itemName[4]) - 1],
+        };
+      });
+    },
   },
 };
 </script>
@@ -346,4 +538,10 @@ export default {
 .bordered {
   border: 2px solid grey;
 }
+
+.color-grid {
+  min-height: 11em;
+  line-height: 2em;
+  box-sizing: content-box;
+}
 </style>