Make lists sortable & draggable

Author: tsanak

package-lock.json

@@ -13,6 +13,7 @@
     "uuid": "^3.2.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1",
     "vuex-persistedstate": "^2.4.2"
   },

package.json

@@ -26,7 +26,8 @@ html::-webkit-scrollbar-track
 
 html::-webkit-scrollbar
 {
-    width: 8px;
+    width: 10px;
+    height: 10px;
     background-color: #F5F5F505;
 }
 

src/App.vue

@@ -8,13 +8,20 @@
                 </button>
             </router-link>
             <div class="columns m-4 mt-50">
-                <list
-                    v-for="list in project.lists"
-                    :key="list.id"
-                    :list="list"
-                    :projectId="projectId"
-                >
-                </list>
+                <draggable 
+                    element="span"
+                    v-model="project.lists" 
+                    @end="onEnd"
+                    class="d-inherit"
+                    >
+                    <list
+                        v-for="list in project.lists"
+                        :key="list.id"
+                        :list="list"
+                        :projectId="projectId"
+                    >
+                    </list>
+                </draggable>
                 <div class="column">
                     <div class="card">
                         <div class="card-content new-list-card-content">
@@ -35,11 +42,13 @@
 <script>
 import ItemListForm from '@/components/ItemListForm';
 import List from '@/components/List';
+import draggable from 'vuedraggable';
 export default {
     name: 'Project',
     components: {
         ItemListForm,
-        List
+        List,
+        draggable
     },
     computed: {
         projects() {
@@ -50,7 +59,7 @@ export default {
                 return proj.id == this.projectId
             });
             return currentProject;
-        }
+        },
     },
     data() {
         return {
@@ -64,6 +73,12 @@ export default {
             //Add list to project
             this.$store.dispatch('addList', { list: this.newList, projectId: this.projectId});
             this.newList = '';
+        },
+        onEnd() {
+            this.$store.dispatch('updateListPosition', {
+                projectId: this.projectId,
+                lists: this.project.lists
+            });
         }
     }
 }
@@ -121,4 +136,8 @@ export default {
     .w100 {
         width: 100%;
     }
+    
+    .d-inherit {
+        display: inherit;
+    }
 </style>

src/components/Project.vue

@@ -43,6 +43,11 @@ export const store = new Vuex.Store({
             let listIndex = payload.listIndex;
             state.projects[projectIndex].lists.splice(listIndex, 1);
         },
+        updateListPosition(state, payload) {
+            let projectIndex = payload.projectIndex;
+            let lists = payload.lists;
+            state.projects[projectIndex].lists = lists;
+        },
         removeItem(state, payload) {
             let projectIndex = payload.projectIndex;
             let listIndex = payload.listIndex;
@@ -89,6 +94,15 @@ export const store = new Vuex.Store({
                 }
             }
         },
+        updateListPosition({ commit, state }, payload) {
+            let lists = payload.lists;
+            let projectIndex = state.projects.findIndex(proj => {
+                return proj.id == payload.projectId;
+            });
+            if(projectIndex > -1) {
+                commit('updateListPosition', { projectIndex, lists });
+            }
+        },
         addItem({ commit, state }, payload) {
             let item = payload.item;
             let listId = payload.listId;