From c977c64139f4e83fd262e91e9a6be66984007d5b Mon Sep 17 00:00:00 2001
From: Joel McKinnon <joel.g.mckinnon@nasa.gov>
Date: Tue, 28 Jan 2020 16:31:01 -0800
Subject: [PATCH] added drag image and grab cursor

---
 .../condition/components/ConditionEdit.vue      | 17 ++++++++---------
 src/plugins/condition/components/condition.scss |  7 +++++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/plugins/condition/components/ConditionEdit.vue b/src/plugins/condition/components/ConditionEdit.vue
index 883fd135b7..9feba6455f 100644
--- a/src/plugins/condition/components/ConditionEdit.vue
+++ b/src/plugins/condition/components/ConditionEdit.vue
@@ -1,16 +1,15 @@
 <template>
 <div v-if="condition"
-     :data-condition-index="conditionIndex"
      class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
      :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
-     :draggable="!condition.isDefault"
-     @dragstart="dragStart"
-     @dragover.stop
 >
     <div class="title-bar">
-        <span
-            class="c-c__menu-hamburger"
-            :class="{ 'is-enabled': !condition.isDefault }"
+        <span class="c-c__menu-hamburger"
+              :class="{ 'is-enabled': !condition.isDefault }"
+              :data-condition-index="conditionIndex"
+              :draggable="!condition.isDefault"
+              @dragstart="dragStart"
+              @dragover.stop
         ></span>
         <span
             class="is-enabled flex-elem"
@@ -204,8 +203,6 @@ export default {
             this.conditionClass = new ConditionClass(this.condition, this.openmct);
             this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
         }));
-
-        this.dragGhost = document.getElementById('js-c-drag-ghost');
     },
     updated() {
         if (this.isCurrent && this.isCurrent.key === this.condition.key) {
@@ -215,6 +212,8 @@ export default {
     },
     methods: {
         dragStart(e) {
+            e.dataTransfer.effectAllowed = "copyMove";
+            e.dataTransfer.setDragImage(e.target.closest('.c-c-container__container'), 0, 0);
             this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
         },
         handleConditionResult(args) {
diff --git a/src/plugins/condition/components/condition.scss b/src/plugins/condition/components/condition.scss
index 939ac627e1..dcfeea42a1 100644
--- a/src/plugins/condition/components/condition.scss
+++ b/src/plugins/condition/components/condition.scss
@@ -137,7 +137,14 @@
     }
 }
 
+
 .c-c__menu-hamburger {
+    &:active {
+        cursor: grabbing;
+        cursor: -moz-grabbing;
+        cursor: -webkit-grabbing;
+    }
+
     &:before {
         content: $glyph-icon-menu-hamburger;
     }