From 59987a224f9c552f4362eacbe6c1f3e78ab8cdc2 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 9 Feb 2023 13:36:01 +0100
Subject: [PATCH] Save ID of grid
---
src/DragContainer.vue | 31 ++++++++++++++++++++++++++++---
src/DragGrid.vue | 6 ++++++
2 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 1764be6..ff55661 100644
--- a/src/DragContainer.vue
+++ b/src/DragContainer.vue
@@ -1,5 +1,5 @@
<template>
- <div @dragstart="handleDragStart" draggable="true" id="wrapper">
+ <div @dragstart="handleDragStart" :draggable="!isDisabled" id="wrapper">
<slot></slot>
</div>
</template>
@@ -9,6 +9,7 @@ export default {
name: "DragContainer",
methods: {
handleDragStart(event) {
+ if (this.isDisabled) return;
event.dataTransfer.setData(
"vueDrag/gridItem",
JSON.stringify({
@@ -19,6 +20,7 @@ export default {
h: this.h,
data: this.data,
context: this.context,
+ originGridId: this.gridId,
})
);
},
@@ -31,13 +33,36 @@ export default {
h: Number,
data: Object,
context: String,
+ gridId: String,
+ disabled: Boolean,
+ },
+ computed: {
+ isInGrid() {
+ return this.x >= 0 && this.y >= 0;
+ },
+ isNotInGrid() {
+ return this.x === -1 || this.y === -1;
+ },
+ getX() {
+ return this.x === 0 ? "auto" : this.x;
+ },
+ getY() {
+ return this.y === 0 ? "auto" : this.y;
+ },
+ getDisplay() {
+ return this.isInGrid ? "block" : "none";
+ },
+ isDisabled() {
+ return this.disabled || this.isNotInGrid;
+ },
},
};
</script>
<style scoped>
#wrapper {
- grid-column: v-bind(x) / span v-bind(w);
- grid-row: v-bind(y) / span v-bind(h);
+ grid-column: v-bind(getX) / span v-bind(w);
+ grid-row: v-bind(getY) / span v-bind(h);
+ display: v-bind(getDisplay);
}
</style>
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 93096c9..fe6be5a 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -17,6 +17,7 @@
:h="get('h', item)"
:data="item.data"
:context="context"
+ :grid-id="gridId"
>
<slot v-bind="item" name="item">
<dl>
@@ -71,6 +72,11 @@ export default {
required: false,
default: uuidv4,
},
+ gridId: {
+ type: String,
+ required: false,
+ default: uuidv4,
+ },
},
methods: {
positionAllowed(x, y, key) {
--
GitLab