restore drag&drop in stage loader

docs/.vuepress/components/GroupSelectComponent.vue

@@ -66,6 +66,10 @@ select {
   color: white;
   font-weight: bold;
   cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .select-wrapper:hover {
@@ -80,14 +84,14 @@ select optgroup {
 
 .select-wrapper:after {
   position: absolute;
-  right: 2px;
-  top: 2px;
-  width: 50px;
+  right: 0px;
+  top: 3px;
+  width: 40px;
   height: 100%;
   content: "\25BC";
   text-align: center;
   color: white;
-  font-size: 18px;
+  font-size: 14px;
   z-index: -1;
 }
 </style>

docs/.vuepress/components/SelectComponent.vue

@@ -56,6 +56,10 @@ select {
   color: white;
   font-weight: bold;
   cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .select-wrapper:hover {
@@ -69,14 +73,14 @@ select option {
 
 .select-wrapper:after {
   position: absolute;
-  right: 2px;
-  top: 2px;
-  width: 50px;
+  right: 0px;
+  top: 3px;
+  width: 40px;
   height: 100%;
   content: "\25BC";
   text-align: center;
   color: white;
-  font-size: 18px;
+  font-size: 14px;
   z-index: -1;
 }
 </style>

docs/.vuepress/components/StageLoader.vue

@@ -35,22 +35,29 @@
     <div class="config">
       <span>Route:</span>
       <ul class="level-select">
-        <li v-for="(level, index) in selectedRoute">
-          <div class="route-drag">&#8801;</div>
+        <draggable
+          v-model="selectedRoute"
+          handle=".route-drag"
+          ghost-class="ghost"
+        >
+          <li v-for="(level, index) in selectedRoute">
+            <div class="route-drag">&#8801;</div>
 
-          <GroupSelectComponent
-            :selectedValue="level.value"
-            :optGroups="stageLoaderLevelOptions"
-            :onChange="(e) => onStageLoaderLevelChanged(index, e)"
-          />
-          <button
-            @click="onLevelDeleted(index)"
-            type="button"
-            class="route-remove"
-          >
-            &#215;
-          </button>
-        </li>
+            <GroupSelectComponent
+              :selectedValue="level.value"
+              :optGroups="stageLoaderLevelOptions"
+              :onChange="(e) => onStageLoaderLevelChanged(index, e)"
+              :key="index"
+            />
+            <button
+              @click="onLevelDeleted(index)"
+              type="button"
+              class="route-remove"
+            >
+              &#215;
+            </button>
+          </li>
+        </draggable>
       </ul>
     </div>
     <div class="config">
@@ -89,10 +96,16 @@ import GroupSelectComponent from "./GroupSelectComponent";
 import stageLoaderLevels from "../data/stageLoaderLevels.json";
 import stageLoaderPresets from "../data/stageLoaderPresets.json";
 
+// Lib
+import draggable from "vuedraggable";
+
 export default {
   props: {
     fastCodes: { type: Object },
   },
+  components: {
+    draggable,
+  },
   data() {
     return {
       selectedRoute: [],
@@ -213,9 +226,11 @@ ul {
 ul li {
   display: flex;
   flex-wrap: nowrap;
+  margin-bottom: 2px;
 }
 
 .route-drag {
+  cursor: move;
   margin-right: 5px;
 }
 
@@ -232,3 +247,9 @@ ul li {
   cursor: pointer;
 }
 </style>
+
+<style>
+.ghost select {
+  background-color: orange;
+}
+</style>

package-lock.json

@@ -8754,6 +8754,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -9983,6 +9988,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.23.2",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
+      "integrity": "sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ==",
+      "requires": {
+        "sortablejs": "^1.10.1"
+      }
+    },
     "vuepress": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/vuepress/-/vuepress-1.5.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@vuepress/plugin-medium-zoom": "^1.3.1"
   },
   "dependencies": {
-    "axios": "^0.19.2"
+    "axios": "^0.19.2",
+    "vuedraggable": "^2.23.2"
   }
 }