From e97b2f5044d451b6c246ff6c91819e57fc0a02fc Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Wed, 25 Oct 2023 13:28:12 +0200
Subject: [PATCH] Emit Drag events of dragged elements (passed through
DragGrid)
---
src/DragContainer.vue | 4 ++++
src/DragGrid.vue | 10 +++++++++-
2 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
index 6d62d98..7f58883 100644
--- a/src/DragContainer.vue
+++ b/src/DragContainer.vue
@@ -15,6 +15,7 @@
<script>
export default {
name: "DragContainer",
+ emits: ["dragstart", "dragmove", "dragend"],
methods: {
handleDragStart(event) {
if (this.isDisabled) return;
@@ -33,15 +34,18 @@ export default {
};
// Now the element is on top of everything else inside the grid (not on top of other grids though)
this.zIndex = 999999;
+ this.$emit("dragstart", this.dataTransfer);
},
handleDragEnd() {
this.offsetX = 0;
this.offsetY = 0;
this.zIndex = "auto";
+ this.$emit("dragend", this.dataTransfer);
},
handleDragMove(event) {
this.offsetX += event.dx;
this.offsetY += event.dy;
+ this.$emit("dragmove", this.dataTransfer);
},
},
props: {
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 1572374..0a57125 100644
--- a/src/DragGrid.vue
+++ b/src/DragGrid.vue
@@ -35,6 +35,8 @@
:context="context"
:grid-id="gridId"
:disabled="disabled || loading || item.disabled"
+ @dragstart="emitContainerDragStart"
+ @dragend="emitContainerDragEnd"
>
<slot v-bind="transformItem(item)" :raw-item="item" name="item">
<dl>
@@ -75,7 +77,7 @@ export default {
GridItem,
DragContainer,
},
- emits: ["input", "itemChanged"],
+ emits: ["input", "itemChanged", "containerDragStart", "containerDragEnd"],
data() {
return {
isDraggedOver: false,
@@ -312,6 +314,12 @@ export default {
newItem.data = this.getObject("data", item);
return newItem;
},
+ emitContainerDragStart(dataTransfer) {
+ this.$emit("containerDragStart", dataTransfer);
+ },
+ emitContainerDragEnd(dataTransfer) {
+ this.$emit("containerDragEnd", dataTransfer);
+ },
},
computed: {
gridData() {
--
GitLab