From 78005cebfbd3a43651c938034654c45805d81e05 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 14:31:42 +0100
Subject: [PATCH] Enable grid disablement
---
example/src/App.vue | 36 ++++++++++++++++++++++++++++++++++++
src/DragGrid.vue | 10 ++++++++--
2 files changed, 44 insertions(+), 2 deletions(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index 451cba0..9eb3485 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -248,6 +248,41 @@ import NumberCounter from "./components/NumberCounter.vue";
</template>
</drag-grid>
</div>
+
+ <div class="ttt-container">
+ <div>
+ <h2>Example 6: Disabled grid</h2>
+ <p>
+ This uses the same data as the tic tac toe but is completely disabled.
+ Notice how the items still move if the tic tac toe grid above is
+ changed. Uncheck the checkbox to enable:
+ </p>
+
+ <label>
+ <input type="checkbox" v-model="gridDisabled" />
+ Grid disabled?
+ </label>
+
+ <drag-grid
+ v-model="ticTacToe1"
+ :cols="3"
+ :rows="3"
+ :disabled="gridDisabled"
+ class="tic-tac-toe"
+ context="ticTacToe"
+ :validate-element="randomKey"
+ >
+ <template #item="item">
+ <CircularCard>
+ {{ item.key.startsWith("a") ? "X" : "O" }}
+ </CircularCard>
+ </template>
+ </drag-grid>
+ </div>
+ <div>
+ <h2>Example 7: Disabled fields and items with props</h2>
+ </div>
+ </div>
</div>
</template>
@@ -419,6 +454,7 @@ export default {
x: 4,
y: 2,
},
+ gridDisabled: true,
};
},
computed: {
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 02a4145..44b5e40 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -1,7 +1,7 @@
<template>
<div
- @dragover.prevent="handleDragOver"
- @drop.prevent="handleDrop"
+ @dragover.prevent="disabled ? undefined : handleDragOver($event)"
+ @drop.prevent="disabled ? undefined : handleDrop($event)"
class="grid"
>
<div class="highlight-container" ref="highlightContainer">
@@ -20,6 +20,7 @@
:data="getObject('data', item)"
:context="context"
:grid-id="gridId"
+ :disabled="disabled"
>
<slot v-bind="transformItem(item)" :raw-item="item" name="item">
<dl>
@@ -86,6 +87,11 @@ export default {
required: false,
default: false,
},
+ disabled: {
+ type: Boolean,
+ required: false,
+ default: false,
+ },
},
methods: {
positionAllowed(x, y, key) {
--
GitLab