diff --git a/src/DragContainer.vue b/src/DragContainer.vue index 6d62d98015af4a17403187a6d57ac8d8d24fe642..7f588839c0c6b2407834ef0f509e9e758aee2e9b 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 1572374d6b64265cfe91c8ef0b489833d905ce61..0a5712555497b1ae922e9cbe56418be27f7bdf56 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() {