From 748edaf587ec2091f3f5baf373f9ef6d5f3f60b4 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 8 Feb 2023 19:08:04 +0100
Subject: [PATCH] (Dis)Allow dragging between grids
---
example/src/App.vue | 42 ++++++++++++++++++++++++++++++++++++------
package.json | 13 ++++++++-----
src/DragContainer.vue | 2 ++
src/DragGrid.vue | 29 ++++++++++++++++++++++-------
4 files changed, 68 insertions(+), 18 deletions(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index bb1db44..04e6ea3 100644
--- a/example/src/App.vue
+++ b/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>
diff --git a/package.json b/package.json
index 6dc80c6..4ee0f83 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 0ac7a2e..1764be6 100644
--- a/src/DragContainer.vue
+++ b/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>
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index ee31af1..55ae936 100644
--- a/src/DragGrid.vue
+++ b/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;
--
GitLab