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

@@ -20,6 +20,7 @@ import CircularCard from "./components/CircularCard.vue";
         v-model="ticTacToe1"
         class="tic-tac-toe"
         context="ticTacToe"
+        :validate-element="randomKey"
       >
         <template #item="item">
           <CircularCard>
@@ -27,13 +28,17 @@ import CircularCard from "./components/CircularCard.vue";
           >
         </template>
       </DragGrid>
-      <span> These two are two different grids but are interchangeable! </span>
+      <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="3"
-        :cols="3"
+        :rows="1"
+        :cols="2"
         v-model="ticTacToe2"
         class="tic-tac-toe"
         context="ticTacToe"
+        :pos-validation="blockAllMoving"
       >
         <template #item="item">
           <CircularCard>
@@ -54,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 {
@@ -77,14 +89,12 @@ export default {
       ],
       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: "b4", data: {} }],
+      ticTacToe2: [
+          { x: 1, y: 1, w: 1, h: 1, key: "a", data: {} },
+          { x: 2, y: 1, w: 1, h: 1, key: "b", data: {} },
+      ],
     };
   },
 };