From 55054310f26aa52ad397a2a7d87306d3c836c2ff Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 18 Aug 2023 17:59:21 +0200
Subject: [PATCH] Example for isDraggedOver
---
example/src/Example7DisabledItems.vue | 41 ++++++++++++++++-----------
1 file changed, 25 insertions(+), 16 deletions(-)
diff --git a/example/src/Example7DisabledItems.vue b/example/src/Example7DisabledItems.vue
index dff2a1d..09d2858 100644
--- a/example/src/Example7DisabledItems.vue
+++ b/example/src/Example7DisabledItems.vue
@@ -3,23 +3,31 @@ import DragGrid from "../../src/DragGrid.vue";
</script>
<template>
- <drag-grid
- v-model="someDisabledItems"
- :cols="4"
- :rows="4"
- class="size"
- :disabled-fields="disabledFields"
- >
- <template #item="{ rawItem }">
- <div
- class="container"
- :style="{ background: rawItem.disabled ? 'red' : 'green' }"
- ></div>
- </template>
- <template #disabledField
- ><div class="container">This field is disabled!</div></template
+ <div>
+ <label>
+ <input type="checkbox" v-model="showDisabled" />
+ Show disabled fields even when not dragged over?
+ </label>
+ <drag-grid
+ v-model="someDisabledItems"
+ :cols="4"
+ :rows="4"
+ class="size"
+ :disabled-fields="disabledFields"
>
- </drag-grid>
+ <template #item="{ rawItem }">
+ <div
+ class="container"
+ :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+ ></div>
+ </template>
+ <template #disabledField="{ isDraggedOver }">
+ <div class="container" v-show="showDisabled || isDraggedOver">
+ This field is disabled!
+ </div>
+ </template>
+ </drag-grid>
+ </div>
</template>
<script>
@@ -40,6 +48,7 @@ export default {
{ x: 2, y: 3 },
{ x: 4, y: 2 },
],
+ showDisabled: false,
};
},
};
--
GitLab