(Dis)Allow dragging between grids

example/src/App.vue

@@ -13,11 +13,35 @@ 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"
+      >
+        <template #item="item">
+          <CircularCard>
+            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+          >
+        </template>
+      </DragGrid>
+      <span> These two are two different grids but are interchangeable! </span>
+      <DragGrid
+        :rows="3"
+        :cols="3"
+        v-model="ticTacToe2"
+        class="tic-tac-toe"
+        context="ticTacToe"
+      >
+        <template #item="item">
+          <CircularCard>
+            {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard
+          >
+        </template>
+      </DragGrid>
+    </div>
   </div>
 </template>
 
@@ -51,7 +75,7 @@ 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: {} },
@@ -60,6 +84,7 @@ export default {
         { 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: {} }],
     };
   },
 };
@@ -95,4 +120,9 @@ export default {
 .tic-tac-toe {
   max-width: 400px;
 }
+
+.ttt-container {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

package.json

@@ -23,10 +23,6 @@
     "vue": "^2.7.14"
   },
   "devDependencies": {
-    "rollup": "^3.12.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-vue": "^6.0.0",
-    "vuepress": "^1.9.8",
     "@rushstack/eslint-patch": "^1.1.0",
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-vue2": "^1.1.2",
@@ -34,7 +30,14 @@
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^9.0.0",
     "prettier": "^2.5.1",
+    "rollup": "^3.12.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-vue": "^6.0.0",
     "terser": "^5.14.2",
-    "vite": "^3.0.2"
+    "vite": "^3.0.2",
+    "vuepress": "^1.9.8"
+  },
+  "dependencies": {
+    "uuid": "^9.0.0"
   }
 }

src/DragContainer.vue

@@ -18,6 +18,7 @@ export default {
           w: this.w,
           h: this.h,
           data: this.data,
+          context: this.context,
         })
       );
     },
@@ -29,6 +30,7 @@ export default {
     w: Number,
     h: Number,
     data: Object,
+    context: String,
   },
 };
 </script>

src/DragGrid.vue

@@ -16,6 +16,7 @@
       :w="item.w"
       :h="item.h"
       :data="item.data"
+      :context="context"
     >
       <slot v-bind="item" name="item">
         <dl>
@@ -36,6 +37,7 @@
 
 <script>
 import DragContainer from "./DragContainer.vue";
+import { v4 as uuidv4 } from "uuid";
 
 export default {
   name: "DragGrid",
@@ -60,6 +62,11 @@ export default {
       type: Array,
       required: true,
     },
+    context: {
+      type: String,
+      required: false,
+      default: uuidv4,
+    },
   },
   methods: {
     positionAllowed(x, y, key) {
@@ -83,6 +90,11 @@ export default {
       let element = JSON.parse(data);
       let coords = this.getCoords(event.layerX, event.layerY);
 
+      if (element.context !== this.context) {
+        this.$refs.highlight.style.display = "none";
+        return;
+      }
+
       let newPositionValid = true;
 
       for (let x = coords.x; x < coords.x + element.w; x++) {
@@ -108,7 +120,11 @@ export default {
       this.$refs.highlight.style.display = "none";
       let data = event.dataTransfer.getData("vueDrag/gridItem");
       let element = JSON.parse(data);
-      console.log(element);
+      console.log(element, this.context);
+
+      if (element.context !== this.context) {
+        return;
+      }
 
       let coords = this.getCoords(event.layerX, event.layerY);
 
@@ -125,12 +141,11 @@ export default {
       if (!newPositionValid) return;
 
       let valueCopy = structuredClone(this.value);
-      valueCopy.splice(
-        valueCopy.findIndex((i) => {
-          return i.key === element.key;
-        }),
-        1
-      );
+
+      let index = valueCopy.findIndex((i) => {
+        return i.key === element.key;
+      });
+      if (index >= 0) valueCopy.splice(index, 1);
 
       element.x = coords.x;
       element.y = coords.y;