From c55ca3235e9505e9e9c9cff5f716aca971459977 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 8 Feb 2023 20:26:40 +0100
Subject: [PATCH] Add element validation function
---
example/src/App.vue | 28 +++++++++++++++++++---------
src/DragGrid.vue | 7 ++++++-
2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index 04e6ea3..12b5bfd 100644
--- a/example/src/App.vue
+++ b/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: {} },
+ ],
};
},
};
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 55ae936..2882c87 100644
--- a/src/DragGrid.vue
+++ b/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;
--
GitLab