From c0a580d0a1c773a257cc6322068619b5d0be3db8 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Wed, 24 Jun 2020 16:50:51 +0200
Subject: [PATCH] Better UI for dragging in multiselect

---
 assets/js/app/editor/Components/Select.vue    | 22 +++++++++++++++++++
 .../modules/editor/fields/_multiselect.scss   | 16 ++++++++++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/assets/js/app/editor/Components/Select.vue b/assets/js/app/editor/Components/Select.vue
index 4f9eb8d73..a83b6dfae 100644
--- a/assets/js/app/editor/Components/Select.vue
+++ b/assets/js/app/editor/Components/Select.vue
@@ -34,6 +34,9 @@
             class="multiselect__tag"
             :draggable="!taggable"
             @dragstart="drag($event)"
+            @dragover="dragOver($event)"
+            @dragleave="dragLeave($event)"
+            @dragend="dragEnd($event)"
           >
             <div v-if="!taggable" class="multiselect__tag__drag">
               <i class="fas fa-arrows-alt"></i>
@@ -61,6 +64,7 @@
 
 <script>
 import Multiselect from 'vue-multiselect';
+import $ from 'jquery';
 
 export default {
   name: 'EditorSelect',
@@ -170,8 +174,26 @@ export default {
       e.preventDefault();
     },
     drag(e) {
+      $(e.target).addClass('dragging');
       e.dataTransfer.setData('text', e.target.id);
     },
+    dragOver(e) {
+      const target = this.findDropElement(e.target);
+
+      // Only add dragover if not dragging over the element
+      // that is being dragged
+      if (!$(target).hasClass('dragging')) {
+        $(target).addClass('dragover');
+      }
+    },
+    dragLeave(e) {
+      const target = this.findDropElement(e.target);
+      $(target).removeClass('dragover');
+    },
+    dragEnd(e) {
+      const target = this.findDropElement(e.target);
+      $(target).removeClass('dragging');
+    },
   },
 };
 </script>
diff --git a/assets/scss/modules/editor/fields/_multiselect.scss b/assets/scss/modules/editor/fields/_multiselect.scss
index f6e5f17ed..da1c84a89 100644
--- a/assets/scss/modules/editor/fields/_multiselect.scss
+++ b/assets/scss/modules/editor/fields/_multiselect.scss
@@ -1,3 +1,15 @@
-.multiselect__tag__drag {
-  display: inline-flex;
+.multiselect__tag {
+  &__drag {
+    display: inline-flex;
+  }
+
+  border: 1px dashed transparent;
+
+  &.dragover {
+    border-color: $bolt-bluegray;
+  }
+
+  &.dragging {
+    opacity: 0.25;
+  }
 }