Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

example/src/App.vue

@@ -13,11 +13,40 @@ import CircularCard from "./components/CircularCard.vue";
         <div class="container">{{ item }}</div>
       </template>
     </DragGrid>
-    <DragGrid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
-      <template #item="item">
-        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard>
-      </template>
-    </DragGrid>
+    <div class="ttt-container">
+      <DragGrid
+        :rows="3"
+        :cols="3"
+        v-model="ticTacToe1"
+        class="tic-tac-toe"
+        context="ticTacToe"
+        :validate-element="randomKey"
+      >
+        <template #item="item">
+          <CircularCard>
+            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+          >
+        </template>
+      </DragGrid>
+      <div>
+        <p>These two are two different grids but we can drag from right to left!</p>
+        <p>Drag items from the container on the right to play on the left.</p>
+      </div>
+      <DragGrid
+        :rows="1"
+        :cols="2"
+        v-model="ticTacToe2"
+        class="tic-tac-toe"
+        context="ticTacToe"
+        :pos-validation="blockAllMoving"
+      >
+        <template #item="item">
+          <CircularCard>
+            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+          >
+        </template>
+      </DragGrid>
+    </div>
   </div>
 </template>
 
@@ -30,6 +59,13 @@ export default {
       if (x === 4 && y === 3) return false;
       return key !== "obj8";
     },
+    blockAllMoving() {
+      return false;
+    },
+    randomKey(element) {
+      if (element.key !== "a" && element !== "b") return;
+      element.key += Math.random().toString(36).replace('0.', '');
+    },
   },
   data() {
     return {
@@ -51,14 +87,13 @@ export default {
         },
         { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
       ],
-      ticTacToe: [
+      ticTacToe1: [
         { x: 1, y: 1, w: 1, h: 1, key: "a1", data: {} },
-        { x: 1, y: 3, w: 1, h: 1, key: "a2", data: {} },
-        { x: 2, y: 2, w: 1, h: 1, key: "a3", data: {} },
-        { x: 3, y: 2, w: 1, h: 1, key: "a4", data: {} },
         { x: 3, y: 3, w: 1, h: 1, key: "b1", data: {} },
-        { x: 1, y: 2, w: 1, h: 1, key: "b2", data: {} },
-        { x: 3, y: 1, w: 1, h: 1, key: "b3", data: {} },
+      ],
+      ticTacToe2: [
+          { x: 1, y: 1, w: 1, h: 1, key: "a", data: {} },
+          { x: 2, y: 1, w: 1, h: 1, key: "b", data: {} },
       ],
     };
   },
@@ -95,4 +130,9 @@ export default {
 .tic-tac-toe {
   max-width: 400px;
 }
+
+.ttt-container {
+  display: flex;
+  justify-content: space-between;
+}
 </style>