Sort multiselect fields with drag and drop

assets/js/app/editor/Components/Select.vue

@@ -1,6 +1,7 @@
 <template>
   <div :id="`multiselect-${id}`" :class="classname">
     <multiselect
+      ref="vselect"
       v-model="selected"
       :allow-empty="allowempty"
       :limit="1000"
@@ -25,6 +26,28 @@
         <span class="status mr-2" :class="`is-${props.option.key}`"></span>
         {{ props.option.value }}
       </template>
+      <template v-if="name !== 'status'" slot="tag" slot-scope="props">
+        <span @drop="drop($event)" @dragover="allowDrop($event)">
+          <span
+            :id="props.option.key"
+            :key="props.option.value"
+            class="multiselect__tag"
+            :draggable="!taggable"
+            @dragstart="drag($event)"
+          >
+            <div v-if="!taggable" class="multiselect__tag__drag">
+              <i class="fas fa-arrows-alt"></i>
+            </div>
+            <span v-text="props.option.value"></span>
+            <i
+              tabindex="1"
+              class="multiselect__tag-icon"
+              @keypress.enter.prevent="removeElement(props.option)"
+              @mousedown.prevent="removeElement(props.option)"
+            ></i>
+          </span>
+        </span>
+      </template>
     </multiselect>
     <input
       :id="id"
@@ -78,11 +101,14 @@ export default {
     },
   },
   mounted() {
-    const _values = this.value;
+    const _values = this.value.map ? this.value : [];
     const _options = this.options;
 
-    let filterSelectedItems = _options.filter(item => {
-      return _values.includes(item.key);
+    let filterSelectedItems = _values.map(value => {
+      const item = _options.filter(opt => opt.key === value);
+      if (item) {
+        return item[0];
+      }
     });
 
     if (filterSelectedItems.length === 0) {
@@ -102,6 +128,50 @@ export default {
       this.value.push(tag);
       this.selected.push(tag);
     },
+    removeElement: function(element) {
+      this.$refs.vselect.removeElement(element);
+    },
+    drop(e) {
+      e.preventDefault();
+
+      const incomingId = e.dataTransfer.getData('text');
+
+      /**
+       * JS Draggable API allows elements to be dropped inside child nodes
+       * We have to find the parent with draggable='true' to get the id.
+       */
+      const outgoingId = this.findDropElement(e.target).id;
+
+      const incomingElement = this.selected.find(
+        el => '' + el.key === '' + incomingId,
+      );
+      const outgoingElement = this.selected.find(
+        el => '' + el.key === '' + outgoingId,
+      );
+
+      const incomingIndex = this.selected.indexOf(incomingElement);
+      const outgoingIndex = this.selected.indexOf(outgoingElement);
+
+      // if dragging down, insert after. else, insert before.
+      const newPosition =
+        incomingIndex < outgoingIndex ? outgoingIndex + 1 : outgoingIndex;
+
+      this.selected.splice(incomingIndex, 1);
+      this.selected.splice(newPosition, 0, incomingElement);
+    },
+    findDropElement(el) {
+      while (!el.hasAttribute('draggable')) {
+        el = el.parentNode;
+      }
+
+      return el;
+    },
+    allowDrop(e) {
+      e.preventDefault();
+    },
+    drag(e) {
+      e.dataTransfer.setData('text', e.target.id);
+    },
   },
 };
 </script>

assets/scss/modules/editor/fields/_multiselect.scss

@@ -0,0 +1,3 @@
+.multiselect__tag__drag {
+  display: inline-flex;
+}

assets/scss/modules/editor/fields/fields.scss

@@ -7,3 +7,4 @@
 @import '_image';
 @import '_file';
 @import '_pre_postfix';
+@import '_multiselect';