Emit Drag events of dragged elements (passed through DragGrid)

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: {

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() {