show grabbing cursor while dragging

website/client/components/tasks/column.vue

@@ -37,8 +37,9 @@
     draggable.sortable-tasks(
       ref="tasksList",
       @update='taskSorted',
+      @start="isDragging(true)",
+      @end="isDragging(false)",
       :options='{disabled: activeFilter.label === "scheduled", scrollSensitivity: 64}',
-      class="sortable-tasks"
     )
       task(
         v-for="task in taskList",
@@ -49,12 +50,11 @@
         :group='group',
       )
     template(v-if="hasRewardsList")
-      draggable(
+      draggable.reward-items(
         ref="rewardsList",
         @update="rewardSorted",
         @start="rewardDragStart",
         @end="rewardDragEnd",
-        class="reward-items",
       )
         shopItem(
           v-for="reward in inAppRewards",
@@ -76,6 +76,9 @@
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  /deep/ .draggable-cursor {
+    cursor: grabbing;
+  }
 
   .tasks-column {
     min-height: 556px;
@@ -89,7 +92,6 @@
     margin-top: 16px;
   }
 
-
   .reward-items {
     @supports (display: grid) {
       display: grid;
@@ -335,6 +337,7 @@ export default {
       showPopovers: true,
 
       selectedItemToBuy: {},
+      dragging: false,
     };
   },
   created () {
@@ -521,9 +524,11 @@ export default {
     rewardDragStart () {
       // We need to stop popovers from interfering with our dragging
       this.showPopovers = false;
+      this.isDragging(true);
     },
     rewardDragEnd () {
       this.showPopovers = true;
+      this.isDragging(false);
     },
     quickAdd (ev) {
       // Add a new line if Shift+Enter Pressed
@@ -678,6 +683,14 @@ export default {
         this.error(e.message);
       }
     },
+    isDragging (dragging) {
+      this.dragging = dragging;
+      if (dragging) {
+        document.documentElement.classList.add('draggable-cursor');
+      } else {
+        document.documentElement.classList.remove('draggable-cursor');
+      }
+    },
   },
 };
 </script>