Implement is-draggable feature

README.md

@@ -191,6 +191,7 @@ add-tags-on-blur | Boolean | false | Add new tags when on the input is blur. The
 sort-search-results | Boolean | true | Whether the search results should be sorted.
 before-adding-tag | Function | `tag => true` | Callback to perform additional checks and actions before a tag is added. Return `true` to allow a tag to be added or `false` to forbid the action.
 before-removing-tag | Function | `tag => true` | Callback to perform additional checks and actions before a tag is removed. Return `true` to allow a tag to be added or `false` to forbid the action.
+is-draggable | Boolean | false | Enable draggable sorting of tags.
 
 #### Events
 

dist/style.css

@@ -60,7 +60,6 @@
     width: 75%;
     left: 0.15em;
     background: #5dc282;
-
     height: 2px;
     margin-top: -1px;
 }
@@ -102,6 +101,16 @@
     background-color: #f0f1f2;
 }
 
+.tags-input-badge-draggable {
+    cursor: move;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
 /* Typeahead */
 .typeahead-hide-btn {
     color: #999 !important;

package.json

@@ -18,7 +18,9 @@
         "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
         "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
     },
-    "dependencies": {},
+    "dependencies": {
+        "vuedraggable": "^2.24.3"
+    },
     "browserslist": [
         "> 1%",
         "last 2 versions",

src/VoerroTagsInput.vue

@@ -5,24 +5,26 @@
             'active': isActive,
             'disabled': disabled,
         }">
-            <span v-for="(tag, index) in tags"
-                :key="index"
-                class="tags-input-badge tags-input-badge-pill tags-input-badge-selected-default"
-                :class="{ 'disabled': disabled }"
-            >
-                <slot name="selected-tag"
-                    :tag="tag"
-                    :index="index"
-                    :removeTag="removeTag"
+            <draggable v-model="tags" :disabled='!isDraggable' @start="drag=true" @end="drag=false" style="width:100%;">
+                <span v-for="(tag, index) in tags"
+                    :key="index"
+                    class="tags-input-badge tags-input-badge-pill tags-input-badge-selected-default"
+                    :class="[{ 'disabled': disabled }, { 'tags-input-badge-draggable': isDraggable }]"
                 >
-                    <span v-html="tag[textField]"></span>
-
-                    <a v-show="!disabled"
-                        href="#"
-                        class="tags-input-remove"
-                        @click.prevent="removeTag(index)"></a>
-                </slot>
-            </span>
+                    <slot name="selected-tag"
+                        :tag="tag"
+                        :index="index"
+                        :removeTag="removeTag"
+                    >
+                        <span v-html="tag[textField]"></span>
+
+                        <a v-show="!disabled"
+                            href="#"
+                            class="tags-input-remove"
+                            @click.prevent="removeTag(index)"></a>
+                    </slot>
+                </span>
+            </draggable>
 
             <input type="text"
                 ref="taginput"
@@ -100,7 +102,11 @@
 </template>
 
 <script>
+import draggable from 'vuedraggable'
 export default {
+    components: {
+        draggable,
+    },
     props: {
         elementId: String,
 
@@ -269,6 +275,11 @@ export default {
             type: Function,
             default: () => true
         },
+
+        isDraggable: {
+            type: Boolean,
+            default: false
+        },
     },
 
     data() {