diff --git a/src/DragContainer.vue b/src/DragContainer.vue index d9de43a2395d94adbdac3d2ebfe6c0a0611867ae..2e657c617761ed42db03c99363f38b0acb1a67f2 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>