From 1f6a9df2d71bd65bbbe2c68fd9a26b5f7efb3ea3 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 15:26:54 +0100
Subject: [PATCH] Use a drag cursor for draggable elements
---
src/DragContainer.vue | 16 +++++++++++++++-
1 file changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index d9de43a..2e657c6 100644
--- a/src/DragContainer.vue
+++ b/src/DragContainer.vue
@@ -1,5 +1,11 @@
<template>
- <div @dragstart="handleDragStart" :draggable="!isDisabled" id="wrapper">
+ <div
+ @dragstart="handleDragStart"
+ :draggable="!isDisabled"
+ id="wrapper"
+ ref="wrapper"
+ @dragend="handleDragEnd"
+ >
<slot></slot>
</div>
</template>
@@ -10,6 +16,7 @@ export default {
methods: {
handleDragStart(event) {
if (this.isDisabled) return;
+ this.$refs.wrapper.style.cursor = "grabbing";
event.dataTransfer.setData(
"vueDrag/gridItem",
JSON.stringify({
@@ -24,6 +31,9 @@ export default {
})
);
},
+ handleDragEnd() {
+ this.$refs.wrapper.style.cursor = "grab";
+ },
},
props: {
dragID: {
@@ -80,6 +90,9 @@ export default {
isDisabled() {
return this.disabled || this.isNotInGrid;
},
+ cursor() {
+ return this.disabled ? "auto" : "grab";
+ },
},
};
</script>
@@ -89,5 +102,6 @@ export default {
grid-column: v-bind(getX) / span v-bind(w);
grid-row: v-bind(getY) / span v-bind(h);
display: v-bind(getDisplay);
+ cursor: v-bind(cursor);
}
</style>
--
GitLab