Add element validation function

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: {} },
+      ],
     };
   },
 };

src/DragGrid.vue

@@ -58,6 +58,10 @@ export default {
       type: Function,
       required: false,
     },
+    validateElement: {
+      type: Function,
+      required: false,
+    },
     value: {
       type: Array,
       required: true,
@@ -120,7 +124,8 @@ export default {
       this.$refs.highlight.style.display = "none";
       let data = event.dataTransfer.getData("vueDrag/gridItem");
       let element = JSON.parse(data);
-      console.log(element, this.context);
+
+      if (this.validateElement) this.validateElement(element);
 
       if (element.context !== this.context) {
         return;