Use a drag cursor for draggable elements

src/DragContainer.vue

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