From 7b0daa34ca732f43b7fba33fa4b5cd3b762f61f7 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 18 Aug 2023 17:59:05 +0200
Subject: [PATCH] Show in slot for disabled markers whether an item is dragged
---
src/DragGrid.vue | 16 ++++++++++++++--
1 file changed, 14 insertions(+), 2 deletions(-)
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 49bba44..08db555 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -3,7 +3,7 @@
droppable
@dropmove="disabled || loading ? undefined : handleDragOver($event)"
@drop.prevent="disabled || loading ? undefined : handleDrop($event)"
- @dragleave="$refs.highlightContainer.style.display = 'none'"
+ @dragleave="handleDragLeave"
class="grid"
>
<template v-if="loading">
@@ -56,7 +56,7 @@
:y="disabledField.y"
:key="disabledField.x + '|' + disabledField.y"
>
- <slot name="disabledField"></slot>
+ <slot name="disabledField" :is-dragged-over="isDraggedOver"></slot>
</GridItem>
</template>
<slot></slot>
@@ -76,6 +76,11 @@ export default {
DragContainer,
},
emits: ["input", "itemChanged"],
+ data() {
+ return {
+ isDraggedOver: false,
+ };
+ },
props: {
rows: {
type: Number,
@@ -182,6 +187,8 @@ export default {
return;
}
+ this.isDraggedOver = true;
+
let newPositionValid = true;
for (let x = coords.x; x < coords.x + element.w; x++) {
@@ -204,6 +211,7 @@ export default {
this.$refs.highlightContainer.style.gridRowEnd = "span " + element.h;
},
handleDrop(event) {
+ this.isDraggedOver = false;
this.$refs.highlightContainer.style.display = "none";
let data = event.relatedTarget.dataset.transfer;
if (!data) return;
@@ -267,6 +275,10 @@ export default {
this.$emit("itemChanged", element);
},
+ handleDragLeave() {
+ this.isDraggedOver = false;
+ this.$refs.highlightContainer.style.display = "none";
+ },
clamp: (min, num, max) => Math.min(Math.max(num, min), max),
getCoords(x, y) {
let rect = this.$el.getBoundingClientRect();
--
GitLab