From 21b14800e94ce145523ba88a3e7b46bcd4e4d34e Mon Sep 17 00:00:00 2001
From: Anthony Cirinelli <anthony@x3builders.com>
Date: Tue, 30 Mar 2021 10:47:45 -0700
Subject: [PATCH 1/2] Implement is-draggable feature

---
 README.md               |  1 +
 dist/style.css          | 11 +++++++++-
 package.json            |  4 +++-
 src/VoerroTagsInput.vue | 45 +++++++++++++++++++++++++----------------
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 9031353..82a6e16 100644
--- a/README.md
+++ b/README.md
@@ -190,6 +190,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
 
diff --git a/dist/style.css b/dist/style.css
index ed9b6b3..437e720 100644
--- a/dist/style.css
+++ b/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;
diff --git a/package.json b/package.json
index f597bba..7ac2ca6 100644
--- a/package.json
+++ b/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",
diff --git a/src/VoerroTagsInput.vue b/src/VoerroTagsInput.vue
index acba905..98e44bf 100644
--- a/src/VoerroTagsInput.vue
+++ b/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">
+                <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,
 
@@ -264,6 +270,11 @@ export default {
             type: Function,
             default: () => true
         },
+
+        isDraggable: {
+            type: Boolean,
+            default: false
+        },
     },
 
     data() {

From 5ade064ee375c46cd6739facf30492883868fbbb Mon Sep 17 00:00:00 2001
From: Anthony Cirinelli <anthony@x3builders.com>
Date: Wed, 7 Apr 2021 21:08:56 -0700
Subject: [PATCH 2/2] Set draggable width to 100%.

---
 src/VoerroTagsInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/VoerroTagsInput.vue b/src/VoerroTagsInput.vue
index ae93047..c93968c 100644
--- a/src/VoerroTagsInput.vue
+++ b/src/VoerroTagsInput.vue
@@ -5,7 +5,7 @@
             'active': isActive,
             'disabled': disabled,
         }">
-            <draggable v-model="tags" :disabled='!isDraggable' @start="drag=true" @end="drag=false">
+            <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"