Reorder tasks, lists and kanban buckets (#620)

Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/620 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
2021-07-28 19:56:29 +00:00 · 2021-07-28 19:56:29 +00:00 · 3c7f8d7aa2
commit 3c7f8d7aa2
parent 39ef4b48f2
23 changed files with 1524 additions and 1266 deletions
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@ -436,26 +436,23 @@ describe('Lists', () => {
 				.should('exist')
 		})

+		it('Can drag tasks around', () => {
+			const tasks = TaskFactory.create(2, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')

-		// The following test does not work. It seems like vue-smooth-dnd does not use either mousemove or dragstart
-		// (not sure why this actually works at all?) and as I'm planning to swap that out for vuedraggable/sortable.js
-		// anyway, I figured it wouldn't be worth the hassle right now.
+			cy.get('.kanban .bucket .tasks .task')
+				.contains(tasks[0].title)
+				.first()
+				.drag('.kanban .bucket:nth-child(2) .tasks .dropper div')
 			
-//		it('Can drag tasks around', () => {
-//			const tasks = TaskFactory.create(2, {
-//				list_id: 1,
-//				bucket_id: 1,
-//			})
-//			cy.visit('/lists/1/kanban')
-//
-//			cy.get('.kanban .bucket .tasks .task')
-//				.contains(tasks[0].title)
-//				.first()
-//				.drag('.kanban .bucket:nth-child(2) .tasks .smooth-dnd-container.vertical')
-//				.trigger('mousedown', {which: 1})
-//				.trigger('mousemove', {clientX: 500, clientY: 0})
-//				.trigger('mouseup', {force: true})
-//		})
+			cy.get('.kanban .bucket:nth-child(2) .tasks')
+				.should('contain', tasks[0].title)
+			cy.get('.kanban .bucket:nth-child(1) .tasks')
+				.should('not.contain', tasks[0].title)
+		})

 		it('Should navigate to the task when the task card is clicked', () => {
 			const tasks = TaskFactory.create(5, {
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@ -1,3 +1,4 @@

 import './commands'
 import 'cypress-file-upload'
+import '@4tw/cypress-drag-drop'
--- a/package.json
+++ b/package.json
@ -21,6 +21,7 @@
    "date-fns": "2.23.0",
    "dompurify": "2.3.0",
    "highlight.js": "11.1.0",
+    "is-touch-device": "^1.0.1",
    "lodash": "4.17.21",
    "marked": "2.1.3",
    "register-service-worker": "1.7.2",
@ -32,11 +33,12 @@
    "vue-easymde": "1.4.0",
    "vue-i18n": "8.25.0",
    "vue-shortkey": "3.1.7",
-    "vue-smooth-dnd": "0.8.1",
+    "vuedraggable": "^2.24.3",
    "vuex": "3.6.2",
    "workbox-precaching": "6.1.5"
  },
  "devDependencies": {
+    "@4tw/cypress-drag-drop": "^1.8.0",
    "@fortawesome/fontawesome-svg-core": "1.2.35",
    "@fortawesome/free-regular-svg-icons": "5.15.3",
    "@fortawesome/free-solid-svg-icons": "5.15.3",
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :class="{'is-touch': isTouch}">
 		<div :class="{'is-hidden': !online}">
 			<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
 			<div class="offline" style="height: 0;width: 0;"></div>
@ -24,6 +24,7 @@

 <script>
 import {mapState} from 'vuex'
+import isTouchDevice from 'is-touch-device'

 import authTypes from './models/authTypes'

@ -63,12 +64,17 @@ export default {
 			this.$router.push({name: 'home'})
 		}
 	},
-	computed: mapState({
+	computed: {
+		isTouch() {
+			return isTouchDevice()
+		},
+		...mapState({
 			authUser: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.USER),
 			authLinkShare: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.LINK_SHARE),
 			online: ONLINE,
 			keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
 		}),
+	},
 	methods: {
 		setupOnlineStatus() {
 			this.$store.commit(ONLINE, navigator.onLine)
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@ -49,7 +49,7 @@
 		</div>

 		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
-			<template v-for="n in namespaces">
+			<template v-for="(n, nk) in namespaces">
 				<div :key="n.id" class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
 						@click="toggleLists(n.id)"
@ -73,18 +73,38 @@
 					</a>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
-				<div :key="n.id + 'child'" class="more-container" v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true">
+				<div
+					:key="n.id + 'child'"
+					class="more-container"
+					v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true"
+				>
 					<ul class="menu-list can-be-hidden">
-						<template v-for="l in n.lists">
-							<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
-									are nested inside of the namespaces makes it a lot harder.-->
-							<li :key="l.id" v-if="!l.isArchived">
+						<draggable
+							v-model="n.lists"
+							:group="`namespace-${n.id}-lists`"
+							@start="() => drag = true"
+							@end="e => saveListPosition(e, nk)"
+							v-bind="dragOptions"
+							handle=".handle"
+						>
+							<transition-group type="transition" :name="!drag ? 'flip-list' : null">
+								<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
+								<li
+									v-for="l in n.lists"
+									:key="l.id"
+									v-if="!l.isArchived"
+									class="loader-container"
+									:class="{'is-loading': listUpdating[l.id]}"
+								>
 									<router-link
 										class="list-menu-link"
 										:class="{'router-link-exact-active': currentList.id === l.id}"
 										:to="{ name: 'list.index', params: { listId: l.id} }"
 										tag="span"
 									>
+										<span class="icon handle">
+											<icon icon="grip-lines"/>
+										</span>
 										<span
 											:style="{ backgroundColor: l.hexColor }"
 											class="color-bubble"
@ -104,7 +124,8 @@
 									<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 									<span class="list-setting-spacer" v-else></span>
 								</li>
-						</template>
+							</transition-group>
+						</draggable>
 					</ul>
 				</div>
 			</template>
@ -120,17 +141,26 @@ import {mapState} from 'vuex'
 import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
+import draggable from 'vuedraggable'
+import {calculateItemPosition} from '@/helpers/calculateItemPosition'

 export default {
 	name: 'navigation',
 	data() {
 		return {
 			listsVisible: {},
+			drag: false,
+			dragOptions: {
+				animation: 100,
+				ghostClass: 'ghost',
+			},
+			listUpdating: {},
 		}
 	},
 	components: {
 		ListSettingsDropdown,
 		NamespaceSettingsDropdown,
+		draggable,
 	},
 	computed: mapState({
 		namespaces: state => state.namespaces.namespaces.filter(n => !n.isArchived),
@ -176,6 +206,23 @@ export default {
 		toggleLists(namespaceId) {
 			this.$set(this.listsVisible, namespaceId, !this.listsVisible[namespaceId] ?? false)
 		},
+		saveListPosition(e, namespaceIndex) {
+			const listsFiltered = this.namespaces[namespaceIndex].lists.filter(l => !l.isArchived)
+			const list = listsFiltered[e.newIndex]
+			const listBefore = listsFiltered[e.newIndex - 1] ?? null
+			const listAfter = listsFiltered[e.newIndex + 1] ?? null
+			this.$set(this.listUpdating, list.id, true)
+
+			list.position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
+
+			this.$store.dispatch('lists/updateList', list)
+				.catch(e => {
+					this.error(e)
+				})
+				.finally(() => {
+					this.$set(this.listUpdating, list.id, false)
+				})
+		},
 	},
 }
 </script>
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@ -66,6 +66,12 @@ export default {
 		this.labelService = new LabelService()
 		this.labelTaskService = new LabelTaskService()
 	},
+	props: {
+		defaultPosition: {
+			type: Number,
+			required: false,
+		},
+	},
 	methods: {
 		addTask() {
 			if (this.newTaskTitle === '') {
@ -74,7 +80,7 @@ export default {
 			}
 			this.errorMessage = ''

-			this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId)
+			this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition)
 				.then(task => {
 					this.newTaskTitle = ''
 					this.$emit('taskAdded', task)
--- a/src/components/tasks/mixins/createTask.js
+++ b/src/components/tasks/mixins/createTask.js
@ -6,10 +6,12 @@ import LabelModel from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {mapState} from 'vuex'
 import UserService from '@/services/user'
+import TaskService from '@/services/task'

 export default {
 	data() {
 		return {
+			taskService: TaskService,
 			labelTaskService: LabelTaskService,
 			userService: UserService,
 		}
@ -17,12 +19,13 @@ export default {
 	created() {
 		this.labelTaskService = new LabelTaskService()
 		this.userService = new UserService()
+		this.taskService = new TaskService()
 	},
 	computed: mapState({
 		labels: state => state.labels.labels,
 	}),
 	methods: {
-		createNewTask(newTaskTitle, bucketId = 0, lId = 0) {
+		createNewTask(newTaskTitle, bucketId = 0, lId = 0, position = 0) {
 			const parsedTask = parseTaskText(newTaskTitle)
 			const assignees = []

@ -36,11 +39,14 @@ export default {
 				const list = this.$store.getters['lists/findListByExactname'](parsedTask.list)
 				listId = list === null ? null : list.id
 			}
-			if (listId === null) {
-				listId = lId !== 0 ? lId : this.$route.params.listId
+			if (lId !== 0) {
+				listId = lId
+			}
+			if (typeof this.$route.params.listId !== 'undefined') {
+				listId = parseInt(this.$route.params.listId)
 			}
 			
-			if (typeof listId === 'undefined' || listId === 0) {
+			if (typeof listId === 'undefined' || listId === null) {
 				return Promise.reject('NO_LIST')
 			}

@ -54,6 +60,7 @@ export default {
 					priority: parsedTask.priority,
 					assignees: assignees,
 					bucketId: bucketId,
+					position: position,
 				})
 				return this.taskService.create(task)
 					.then(task => {
--- a/src/components/tasks/mixins/taskList.js
+++ b/src/components/tasks/mixins/taskList.js
@ -1,5 +1,6 @@
 import TaskCollectionService from '../../../services/taskCollection'
 import cloneDeep from 'lodash/cloneDeep'
+import {calculateItemPosition} from '../../../helpers/calculateItemPosition'

 /**
 * This mixin provides a base set of methods and properties to get tasks on a list.
@ -20,7 +21,7 @@ export default {

 			showTaskFilter: false,
 			params: {
-				sort_by: ['done', 'id'],
+				sort_by: ['position', 'id'],
 				order_by: ['asc', 'desc'],
 				filter_by: ['done'],
 				filter_value: ['false'],
@ -148,9 +149,9 @@ export default {
 				if (a.done > b.done)
 					return 1

-				if (a.id > b.id)
+				if (a.position < b.position)
 					return -1
-				if (a.id < b.id)
+				if (a.position > b.position)
 					return 1
 				return 0
 			})
@ -187,5 +188,22 @@ export default {
 				},
 			}
 		},
+		saveTaskPosition(e) {
+			this.drag = false
+			
+			const task = this.tasks[e.newIndex]
+			const taskBefore = this.tasks[e.newIndex - 1] ?? null
+			const taskAfter = this.tasks[e.newIndex + 1] ??  null
+			
+			task.position = calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
+
+			this.$store.dispatch('tasks/update', task)
+				.then(r => {
+					this.$set(this.tasks, e.newIndex, r)
+				})
+				.catch(e => {
+					this.error(e)
+				})
+		},
 	},
 }
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@ -0,0 +1,111 @@
+<template>
+	<div
+		:class="{
+			'is-loading': loadingInternal || loading,
+			'draggable': !(loadingInternal || loading),
+			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
+		}"
+		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
+		@click.ctrl="() => markTaskAsDone(task)"
+		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+		@click.meta="() => markTaskAsDone(task)"
+		class="task loader-container draggable"
+	>
+		<span class="task-id">
+			<span class="is-done" v-if="task.done">Done</span>
+			<template v-if="task.identifier === ''">
+				#{{ task.index }}
+			</template>
+			<template v-else>
+				{{ task.identifier }}
+			</template>
+		</span>
+		<span
+			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+			class="due-date"
+			v-if="task.dueDate > 0"
+			v-tooltip="formatDate(task.dueDate)">
+			<span class="icon">
+				<icon :icon="['far', 'calendar-alt']"/>
+			</span>
+			<span>
+				{{ formatDateSince(task.dueDate) }}
+			</span>
+		</span>
+		<h3>{{ task.title }}</h3>
+		<progress
+			class="progress is-small"
+			v-if="task.percentDone > 0"
+			:value="task.percentDone * 100" max="100">
+			{{ task.percentDone * 100 }}%
+		</progress>
+		<div class="footer">
+			<labels :labels="task.labels"/>
+			<priority-label :priority="task.priority"/>
+			<div class="assignees" v-if="task.assignees.length > 0">
+				<user
+					:avatar-size="24"
+					:key="task.id + 'assignee' + u.id"
+					:show-username="false"
+					:user="u"
+					v-for="u in task.assignees"
+				/>
+			</div>
+			<span class="icon" v-if="task.attachments.length > 0">
+				<icon icon="paperclip"/>	
+			</span>
+			<span v-if="task.description" class="icon">
+				<icon icon="align-left"/>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import {playPop} from '../../../helpers/playPop'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
+import User from '../../../components/misc/user'
+import Labels from '../../../components/tasks/partials/labels'
+
+export default {
+	name: 'kanban-card',
+	components: {
+		PriorityLabel,
+		User,
+		Labels,
+	},
+	data() {
+		return {
+			loadingInternal: false,
+		}
+	},
+	props: {
+		task: {
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	methods: {
+		markTaskAsDone(task) {
+			this.loadingInternal = true
+			task.done = !task.done
+			this.$store.dispatch('tasks/update', task)
+				.then(() => {
+					if (task.done) {
+						playPop()
+					}
+				})
+				.catch(e => {
+					this.error(e)
+				})
+				.finally(() => {
+					this.loadingInternal = false
+				})
+		},
+	},
+}
+</script>
--- a/src/helpers/applyDrag.js
+++ b/src/helpers/applyDrag.js
@ -1,18 +0,0 @@
-export const applyDrag = (arr, dragResult) => {
-	const {removedIndex, addedIndex, payload} = dragResult
-	if (removedIndex === null && addedIndex === null) return arr
-
-	const result = [...arr]
-	// The payload comes from the task itself
-	let itemToAdd = payload
-
-	if (removedIndex !== null) {
-		itemToAdd = result.splice(removedIndex, 1)[0]
-	}
-
-	if (addedIndex !== null) {
-		result.splice(addedIndex, 0, itemToAdd)
-	}
-
-	return result
-}
--- a/src/helpers/calculateItemPosition.ts
+++ b/src/helpers/calculateItemPosition.ts
@ -0,0 +1,19 @@
+export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => {
+	if (positionBefore === null && positionAfter === null) {
+		return 0
+	}
+
+	// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
+	if (positionBefore === null && positionAfter !== null) {
+		return positionAfter / 2
+	}
+	
+	// If there is no task after it, we just add 2^16 to the last position to have enough room in the future
+	if (positionBefore !== null && positionAfter === null) {
+		return positionBefore + Math.pow(2, 16)
+	}
+	
+	// If we have both a task before and after it, we acually calculate the position
+	// @ts-ignore - can never be null but TS does not seem to understand that
+	return positionBefore + (positionAfter - positionBefore) / 2
+}
--- a/src/helpers/calculateTaskPosition.test.ts
+++ b/src/helpers/calculateTaskPosition.test.ts
@ -0,0 +1,18 @@
+import {calculateItemPosition} from './calculateItemPosition'
+
+it('should calculate the task position', () => {
+	const result = calculateItemPosition(10, 100)
+	expect(result).toBe(55)
+})
+it('should return 0 if no position was provided', () => {
+	const result = calculateItemPosition(null, null)
+	expect(result).toBe(0)
+})
+it('should calculate the task position for the first task', () => {
+	const result = calculateItemPosition(null, 100)
+	expect(result).toBe(50)
+})
+it('should calculate the task position for the last task', () => {
+	const result = calculateItemPosition(10, null)
+	expect(result).toBe(65546)
+})
--- a/src/main.ts
+++ b/src/main.ts
@ -72,6 +72,7 @@ import {
 	faShareAlt,
 	faImage,
 	faBell,
+	faGripLines,
 } from '@fortawesome/free-solid-svg-icons'
 import {
 	faCalendarAlt,
@ -179,6 +180,7 @@ library.add(faShareAlt)
 library.add(faImage)
 library.add(faBell)
 library.add(faBellSlash)
+library.add(faGripLines)

 Vue.component('icon', FontAwesomeIcon)

--- a/src/models/task.js
+++ b/src/models/task.js
@ -105,6 +105,9 @@ export default class TaskModel extends AbstractModel {
 			isFavorite: false,
 			subscription: null,
 			
+			position: 0,
+			kanbanPosition: 0,
+
 			createdBy: UserModel,
 			created: null,
 			updated: null,
--- a/src/store/modules/kanban.js
+++ b/src/store/modules/kanban.js
@ -11,7 +11,7 @@ const tasksPerBucket = 25
 const addTaskToBucketAndSort = (state, task) => {
 	const bi = filterObject(state.buckets, b => b.id === task.bucketId)
 	state.buckets[bi].tasks.push(task)
-	state.buckets[bi].tasks.sort((a, b) => a.position > b.position ? 1 : -1)
+	state.buckets[bi].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
 }

 /**
@ -208,7 +208,7 @@ export default {

 			const params = cloneDeep(ps)

-			params.sort_by = 'position'
+			params.sort_by = 'kanban_position'
 			params.order_by = 'asc'

 			let hasBucketFilter = false
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@ -17,8 +17,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';

 .kanban {

-  display: flex;
-  align-items: flex-start;
 	overflow-x: auto;
 	overflow-y: hidden;
 	height: calc(#{$crazy-height-calculation});
@ -29,31 +27,41 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
 	}

+	&-bucket-container {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.ghost {
+		background: transparent !important;
+		border: 3px dashed $grey-300 !important;
+		box-shadow: none !important;
+
+		* {
+			opacity: 0;
+		}
+	}
+
 	.bucket {
 		background-color: $bucket-background;
 		border-radius: $radius;
 		position: relative;

-    flex: 0 0 $bucket-width;
 		margin: 0 $bucket-right-margin 0 0;
 		max-height: 100%;
 		min-height: 20px;
-    max-width: $bucket-width;
+		width: $bucket-width;

 		.tasks {
 			max-height: calc(#{$crazy-height-calculation-tasks});
 			overflow: auto;
+			margin-top: 0;

 			@media screen and (max-width: $tablet) {
 				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
 			}

 			.task {
-
-        &:first-child {
-          margin-top: 0;
-        }
-
 				-webkit-touch-callout: none; // iOS Safari
 				-webkit-user-select: none; // Safari
 				-khtml-user-select: none; // Konqueror HTML
@ -61,10 +69,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 				-ms-user-select: none; // Internet Explorer/Edge
 				user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox

-        transition: $ease-out;
+				//transition: $ease-out;
 				cursor: pointer;
 				box-shadow: $shadow-xs;
 				display: block;
+				border: 3px solid transparent;

 				font-size: .9rem;
 				padding: .5rem;
@ -203,15 +212,27 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 						}
 					}
 				}
+
+				&.v-leave, &.v-leave-to, &.v-leave-active
+				&.move-card-leave, &.move-card-leave-to, &.move-card-leave-active {
+					display: none;
+				}
 			}

-      .drop-preview {
-        border-radius: $radius;
-        margin: 0 .5rem .5rem;
-        background: transparent;
-        border: 3px dashed $grey-300;
+			.dropper {
+				&, > div {
+					min-height: 40px;
 				}
 			}
+		}
+
+		.move-card-move {
+			transition: transform $transition-duration;
+		}
+
+		.no-move {
+			transition: transform 0s;
+		}

 		h2 {
 			font-size: 1rem;
@ -271,6 +292,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			height: auto;
 			padding: .4rem .5rem;
 			display: inline-block;
+			cursor: pointer;
 		}
 	}

@ -292,7 +314,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 }

-.ghost-task {
+.task-dragging {
 	transition: transform 0.18s ease;
 	transform: rotateZ(3deg)
 }
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@ -3,6 +3,16 @@

 	.tasks {
 		width: 100%;
+
+		.ghost {
+			border-radius: $radius;
+			background: $grey-100;
+			border: 2px dashed $grey-300;
+
+			* {
+				opacity: 0;
+			}
+		}
 	}

 	.taskedit {
@ -32,12 +42,13 @@
 	.task {
 		display: flex;
 		flex-wrap: wrap;
-    padding: 0.5rem;
+		padding: .4rem;
 		transition: background-color $transition;
 		align-items: center;
 		cursor: pointer;
 		margin: 0 .5rem;
 		border-radius: $radius;
+		border: 2px solid transparent;

 		&:first-child {
 			margin-top: .5rem;
@ -130,6 +141,17 @@
 			opacity: 1;
 		}

+		.handle {
+			opacity: 0;
+			transition: opacity $transition;
+			margin-right: .25rem;
+			cursor: grab;
+		}
+
+		&:hover .handle {
+			opacity: 1;
+		}
+
 		.fancycheckbox {
 			height: 18px;
 			padding-top: 0;
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@ -238,6 +238,26 @@
 							opacity: 1;
 						}
 					}
+
+					&.loader-container.is-loading:after {
+						width: 1.5rem;
+						height: 1.5rem;
+						top: calc(50% - .75rem);
+						left: calc(50% - .75rem);
+						border-width: 2px;
+					}
+				}
+
+				.flip-list-move {
+					transition: transform $transition-duration;
+				}
+
+				.ghost {
+					background: $grey-200;
+
+					* {
+						opacity: 0;
+					}
 				}

 				a:hover {
@ -245,7 +265,7 @@
 				}

 				span.list-menu-link, li > a {
-          padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
+					padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
 					transition: all 0.2s ease;

 					-webkit-border-radius: 0;
@ -260,8 +280,19 @@
 					.icon {
 						height: 1rem;
 						vertical-align: middle;
-            padding-bottom: 4px;
 						padding-right: 0.5rem;
+						
+						&.handle {
+							opacity: 0;
+							transition: opacity $transition;
+							margin-right: .25rem;
+							cursor: grab;
+						}
+
+					}
+					
+					&:hover .icon.handle {
+						opacity: 1;
 					}

 					&.router-link-exact-active {
@ -316,6 +347,10 @@
 				span.list-menu-link, li > a {
 					padding-left: 2rem;
 					display: inline-block;
+					
+					.icon {
+						padding-bottom: .25rem;
+					}
 				}
 			}

--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@ -153,3 +153,7 @@ button.table {
 .is-strikethrough {
  text-decoration: line-through;
 }
+
+.is-touch .handle {
+	opacity: 1 !important;
+}
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@ -16,12 +16,21 @@
 				v-model="params"
 			/>
 		</div>
-		<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
+		<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban kanban-bucket-container loader-container">
+			<draggable
+				v-model="buckets"
+				@start="() => dragBucket = true"
+				@end="updateBucketPosition"
+				group="buckets"
+				v-bind="dragOptions"
+				:disabled="!canWrite"
+			>
+				<transition-group type="transition" :name="!dragBucket ? 'move-bucket': null" tag="div" class="kanban-bucket-container">
 					<div
 						:key="`bucket${bucket.id}`"
 						class="bucket"
 						:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
-				v-for="bucket in buckets"
+						v-for="(bucket, k) in buckets"
 					>
 						<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
 							<span
@ -35,8 +44,9 @@
 								:ref="`bucket${bucket.id}title`"
 								@focusout="() => saveBucketTitle(bucket.id)"
 								@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
+								@click="focusBucketTitle"
 								class="title input"
-						:contenteditable="canWrite && !collapsedBuckets[bucket.id]"
+								:contenteditable="bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]"
 								spellcheck="false">{{ bucket.title }}</h2>
 							<span
 								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
@ -86,8 +96,9 @@
 									class="dropdown-item"
 									v-tooltip="$t('list.kanban.doneBucketHintExtended')"
 								>
-							<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}"><icon
-								icon="check-double"/></span>
+									<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}">
+										<icon icon="check-double"/>
+									</span>
 									{{ $t('list.kanban.doneBucket') }}
 								</a>
 								<a
@ -102,106 +113,39 @@
 									class="dropdown-item has-text-danger"
 									v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
 								>
-							<span class="icon is-small"><icon icon="trash-alt"/></span>
+									<span class="icon is-small">
+										<icon icon="trash-alt"/>
+									</span>
 									{{ $t('misc.delete') }}
 								</a>
 							</dropdown>
 						</div>
 						<div :ref="`tasks-container${bucket.id}`" class="tasks">
-					<!-- Make the component either a div or a draggable component based on the user rights -->
-					<component
-						:animation-duration="150"
-						:drop-placeholder="dropPlaceholderOptions"
-						:get-child-payload="getTaskPayload(bucket.id)"
-						:is="canWrite ? 'Container' : 'div'"
-						:should-accept-drop="() => shouldAcceptDrop(bucket)"
-						@drop="e => onDrop(bucket.id, e)"
-						drag-class="ghost-task"
-						drag-class-drop="ghost-task-drop"
-						drag-handle-selector=".task.draggable"
-						group-name="buckets"
+							<draggable
+								v-model="bucket.tasks"
+								@start="() => drag = true"
+								@end="updateTaskPosition"
+								:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
+								v-bind="dragOptions"
+								:disabled="!canWrite"
+								:data-bucket-index="k"
+								class="dropper"
 							>
-						<!-- Make the component either a div or a draggable component based on the user rights -->
-						<component
-							:is="canWrite ? 'Draggable' : 'div'"
+								<transition-group type="transition" :name="!drag ? 'move-card': null" tag="div">
+									<kanban-card
 										:key="`bucket${bucket.id}-task${task.id}`"
 										v-for="task in bucket.tasks"
-						>
-							<div
-								:class="{
-							'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
-							'draggable': !(taskService.loading || taskLoading) || !taskUpdating[task.id],
-							'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
-						}"
-								:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-								@click.ctrl="() => markTaskAsDone(task)"
-								@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
-								@click.meta="() => markTaskAsDone(task)"
-								class="task loader-container draggable"
-							>
-							<span class="task-id">
-								<span class="is-done" v-if="task.done">Done</span>
-								<template v-if="task.identifier === ''">
-									#{{ task.index }}
-								</template>
-								<template v-else>
-									{{ task.identifier }}
-								</template>
-							</span>
-								<span
-									:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-									class="due-date"
-									v-if="task.dueDate > 0"
-									v-tooltip="formatDate(task.dueDate)">
-									<span class="icon">
-										<icon :icon="['far', 'calendar-alt']"/>
-									</span>
-									<span>
-										{{ formatDateSince(task.dueDate) }}
-									</span>
-								</span>
-								<h3>{{ task.title }}</h3>
-								<progress
-									class="progress is-small"
-									v-if="task.percentDone > 0"
-									:value="task.percentDone * 100" max="100">
-									{{ task.percentDone * 100 }}%
-								</progress>
-								<div class="footer">
-									<span
-										:key="label.id"
-										:style="{'background': label.hexColor, 'color': label.textColor}"
-										class="tag"
-										v-for="label in task.labels">
-										<span>{{ label.title }}</span>
-									</span>
-									<priority-label :priority="task.priority"/>
-									<div class="assignees" v-if="task.assignees.length > 0">
-										<user
-											:avatar-size="24"
-											:key="task.id + 'assignee' + u.id"
-											:show-username="false"
-											:user="u"
-											v-for="u in task.assignees"
+										:task="task"
 									/>
-									</div>
-									<span class="icon" v-if="task.attachments.length > 0">
-										<icon icon="paperclip"/>	
-									</span>
-									<span v-if="task.description" class="icon">
-										<icon icon="align-left"/>
-									</span>
-								</div>
-							</div>
-						</component>
-					</component>
+								</transition-group>
+							</draggable>
 						</div>
 						<div class="bucket-footer" v-if="canWrite">
 							<div class="field" v-if="showNewTaskInput[bucket.id]">
-						<div class="control" :class="{'is-loading': taskService.loading || loading}">
+								<div class="control" :class="{'is-loading': loading}">
 									<input
 										class="input"
-								:disabled="taskService.loading || loading"
+										:disabled="loading"
 										@focusout="toggleShowNewTaskInput(bucket.id)"
 										@keyup.enter="addTaskToBucket(bucket.id)"
 										@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@ -223,10 +167,14 @@
 								icon="plus"
 								type="secondary"
 							>
-						{{ bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask') }}
+								{{
+									bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
+								}}
 							</x-button>
 						</div>
 					</div>
+				</transition-group>
+			</draggable>

 			<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
 				<input
@ -276,50 +224,43 @@
 </template>

 <script>
-import TaskService from '../../../services/task'
 import BucketModel from '../../../models/bucket'

-import {Container, Draggable} from 'vue-smooth-dnd'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
-import Labels from '../../../components/tasks/partials/labels'
-
 import {filterObject} from '@/helpers/filterObject'
-import {applyDrag} from '@/helpers/applyDrag'
 import {mapState} from 'vuex'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
-import {playPop} from '@/helpers/playPop'
-import createTask from '@/components/tasks/mixins/createTask'
+import createTask from '../../../components/tasks/mixins/createTask'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
+import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+import draggable from 'vuedraggable'
+import KanbanCard from '../../../components/tasks/partials/kanban-card'

 export default {
 	name: 'Kanban',
 	components: {
+		KanbanCard,
 		Dropdown,
 		FilterPopup,
-		Container,
-		Draggable,
-		Labels,
-		User,
-		PriorityLabel,
+		draggable,
 	},
 	data() {
 		return {
-			taskService: TaskService,
-
-			dropPlaceholderOptions: {
-				className: 'drop-preview',
-				animationDuration: 150,
-				showOnTop: true,
+			drag: false,
+			dragBucket: false,
+			dragOptions: {
+				animation: 150,
+				ghostClass: 'ghost',
+				dragClass: 'task-dragging',
 			},
 			sourceBucket: 0,

 			showBucketDeleteModal: false,
 			bucketToDelete: 0,
+			bucketTitleEditable: false,

 			newTaskText: '',
 			showNewTaskInput: {},
@ -347,7 +288,6 @@ export default {
 		createTask,
 	],
 	created() {
-		this.taskService = new TaskService()
 		this.loadBuckets()

 		// Save the current list view to local storage
@ -357,14 +297,23 @@ export default {
 	watch: {
 		'$route.params.listId': 'loadBuckets',
 	},
-	computed: mapState({
-		buckets: state => state.kanban.buckets,
+	computed: {
+		buckets: {
+			get() {
+				return this.$store.state.kanban.buckets
+			},
+			set(value) {
+				this.$store.commit('kanban/setBuckets', value)
+			},
+		},
+		...mapState({
 			loadedListId: state => state.kanban.listId,
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'kanban',
 			taskLoading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
 			canWrite: state => state.currentList.maxRight > Rights.READ,
 			list: state => state.currentList,
 		}),
+	},
 	methods: {
 		loadBuckets() {

@ -412,55 +361,21 @@ export default {
 					this.error(e)
 				})
 		},
-		onDrop(bucketId, dropResult) {
+		updateTaskPosition(e) {
+			this.drag = false

-			// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
+			// While we could just pass the bucket index in through the function call, this would not give us the 
+			// new bucket id when a task has been moved between buckets, only the new bucket. Using the data-bucket-id
+			// of the drop target works all the time.
+			const bucketIndex = parseInt(e.to.parentNode.dataset.bucketIndex)

-			const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)
+			const newBucket = this.buckets[bucketIndex]
+			const task = newBucket.tasks[e.newIndex]
+			const taskBefore = newBucket.tasks[e.newIndex - 1] ?? null
+			const taskAfter = newBucket.tasks[e.newIndex + 1] ?? null

-			if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
-
-				// FIXME: This is probably not the best solution and more of a naive brute-force approach
-
-				// Duplicate the buckets to avoid stuff moving around without noticing
-				const buckets = Object.assign({}, this.buckets)
-				// Get the index of the bucket and the bucket itself
-				const bucket = buckets[bucketIndex]
-
-				// Rebuild the tasks from the bucket, removing/adding the moved task
-				bucket.tasks = applyDrag(bucket.tasks, dropResult)
-				// Update the bucket in the list of all buckets
-				delete buckets[bucketIndex]
-				buckets[bucketIndex] = bucket
-				// Set the buckets, triggering a state update in vue
-				// FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
-				//   Not sure what to do about this.
-				// this.$store.commit('kanban/setBuckets', buckets)
-			}
-
-			if (dropResult.addedIndex !== null) {
-
-				const taskIndex = dropResult.addedIndex
-				const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
-				const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
-				const task = this.buckets[bucketIndex].tasks[taskIndex]
-				this.$set(this.taskUpdating, task.id, true)
-				this.oneTaskUpdating = true
-
-				// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
-				if (taskBefore === null && taskAfter !== null) {
-					task.position = taskAfter.position / 2
-				}
-				// If there is no task after it, we just add 2^16 to the last position
-				if (taskBefore !== null && taskAfter === null) {
-					task.position = taskBefore.position + Math.pow(2, 16)
-				}
-				// If we have both a task before and after it, we acually calculate the position
-				if (taskAfter !== null && taskBefore !== null) {
-					task.position = taskBefore.position + (taskAfter.position - taskBefore.position) / 2
-				}
-
-				task.bucketId = bucketId
+			task.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
+			task.bucketId = newBucket.id

 			this.$store.dispatch('tasks/update', task)
 				.catch(e => {
@ -470,32 +385,6 @@ export default {
 					this.$set(this.taskUpdating, task.id, false)
 					this.oneTaskUpdating = false
 				})
-			}
-		},
-		markTaskAsDone(task) {
-			this.oneTaskUpdating = true
-			this.$set(this.taskUpdating, task.id, true)
-			task.done = !task.done
-			this.$store.dispatch('tasks/update', task)
-				.then(() => {
-					if (task.done) {
-						playPop()
-					}
-				})
-				.catch(e => {
-					this.error(e)
-				})
-				.finally(() => {
-					this.$set(this.taskUpdating, task.id, false)
-					this.oneTaskUpdating = false
-				})
-		},
-		getTaskPayload(bucketId) {
-			return index => {
-				const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
-				this.sourceBucket = bucket.id
-				return bucket.tasks[index]
-			}
 		},
 		toggleShowNewTaskInput(bucket) {
 			this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
@ -567,7 +456,13 @@ export default {
 					this.showBucketDeleteModal = false
 				})
 		},
+		focusBucketTitle(e) {
+			// This little helper allows us to drag a bucket around at the title without focusing on it right away.
+			this.bucketTitleEditable = true
+			this.$nextTick(() => e.target.focus())
+		},
 		saveBucketTitle(bucketId) {
+			this.bucketTitleEditable = false
 			const bucketTitleElement = this.$refs[`bucket${bucketId}title`][0]
 			const bucketTitle = bucketTitleElement.textContent
 			const bucket = new BucketModel({
@ -604,6 +499,20 @@ export default {
 					this.error(e)
 				})
 		},
+		updateBucketPosition(e) {
+			this.dragBucket = false
+
+			const bucket = this.buckets[e.newIndex]
+			const bucketBefore = this.buckets[e.newIndex - 1] ?? null
+			const bucketAfter = this.buckets[e.newIndex + 1] ?? null
+
+			bucket.position = calculateItemPosition(bucketBefore !== null ? bucketBefore.position : null, bucketAfter !== null ? bucketAfter.position : null)
+
+			this.$store.dispatch('kanban/updateBucket', bucket)
+				.catch(e => {
+					this.error(e)
+				})
+		},
 		setBucketLimit(bucket) {
 			if (bucket.limit < 0) {
 				return
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@ -63,16 +63,15 @@
 				<add-task
 					@taskAdded="updateTaskList"
 					ref="newTaskInput"
+					:default-position="firstNewPosition"
 				/>
 			</template>

 			<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
-
 				{{ $t('list.list.empty') }}
 				<a @click="focusNewTaskInput()">
 					{{ $t('list.list.newTaskCta') }}
 				</a>
-
 			</nothing>

 			<div class="tasks-container">
@ -80,6 +79,14 @@
 					:class="{ short: isTaskEdit }"
 					class="tasks mt-0"
 					v-if="tasks && tasks.length > 0"
+				>
+					<draggable
+						v-model="tasks"
+						group="tasks"
+						@start="() => drag = true"
+						@end="saveTaskPosition"
+						v-bind="dragOptions"
+						handle=".handle"
 					>
 						<single-task-in-list
 							:show-list-color="false"
@ -90,6 +97,9 @@
 							task-detail-route="task.detail"
 							v-for="t in tasks"
 						>
+							<span class="icon handle">
+								<icon icon="grip-lines"/>
+							</span>
 							<div
 								@click="editTask(t.id)"
 								class="icon settings"
@ -98,6 +108,7 @@
 								<icon icon="pencil-alt"/>
 							</div>
 						</single-task-in-list>
+					</draggable>
 				</div>
 				<card
 					v-if="isTaskEdit"
@ -165,12 +176,15 @@ import SingleTaskInList from '../../../components/tasks/partials/singleTaskInLis
 import taskList from '../../../components/tasks/mixins/taskList'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
-import { mapState } from 'vuex'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import createTask from '@/components/tasks/mixins/createTask'

+import {mapState} from 'vuex'
+import draggable from 'vuedraggable'
+import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
+
 export default {
 	name: 'List',
 	data() {
@ -179,6 +193,12 @@ export default {
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
 			ctaVisible: false,
+
+			drag: false,
+			dragOptions: {
+				animation: 100,
+				ghostClass: 'ghost',
+			},
 		}
 	},
 	mixins: [
@ -191,6 +211,7 @@ export default {
 		SingleTaskInList,
 		EditTask,
 		AddTask,
+		draggable,
 	},
 	created() {
 		this.taskService = new TaskService()
@ -199,10 +220,19 @@ export default {
 		// We use local storage and not vuex here to make it persistent across reloads.
 		saveListView(this.$route.params.listId, this.$route.name)
 	},
-	computed: mapState({
+	computed: {
+		firstNewPosition() {
+			if (this.tasks.length === 0) {
+				return 0
+			}
+
+			return calculateItemPosition(null, this.tasks[0].position)
+		},
+		...mapState({
 			canWrite: state => state.currentList.maxRight > Rights.READ,
 			list: state => state.currentList,
 		}),
+	},
 	mounted() {
 		this.$nextTick(() => (this.ctaVisible = true))
 	},
@ -217,8 +247,11 @@ export default {
 			this.$refs.newTaskInput.$refs.newTaskInput.focus()
 		},
 		updateTaskList(task) {
-			this.tasks.push(task)
-			this.sortTasks()
+			const tasks = [
+				task,
+				...this.tasks,
+			]
+			this.tasks = tasks
 			this.$store.commit(HAS_TASKS, true)
 		},
 		editTask(id) {
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@ -90,6 +90,10 @@ export default {
 	computed: mapState({
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
+			// return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived).map(n => {
+			// 	n.lists = n.lists.filter(l => !l.isArchived)
+			// 	return n
+			// })
 		},
 		loading: LOADING,
 	}),
--- a/yarn.lock
+++ b/yarn.lock
@ -2,6 +2,11 @@
 # yarn lockfile v1


+"@4tw/cypress-drag-drop@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@4tw/cypress-drag-drop/-/cypress-drag-drop-1.8.0.tgz#f2990a414b18445cc117540ba6aba6994ecdd0e8"
+  integrity sha512-hPg9JvG3f+rzunVj6cZjgHaNtZ8JMbHBwD00PZjyl6/ysqyZzeR74b8yWUF0zohWcCG9bHVu666EhotOiIKhZw==
+
 "@babel/code-frame@7.12.11":
  version "7.12.11"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@ -5013,6 +5018,11 @@ is-stream@^2.0.0:
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==

+is-touch-device@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-touch-device/-/is-touch-device-1.0.1.tgz#9a2fd59f689e9a9bf6ae9a86924c4ba805a42eab"
+  integrity sha512-LAYzo9kMT1b2p19L/1ATGt2XcSilnzNlyvq6c0pbPRVisLbAPpLqr53tIJS00kvrTkj0HtR8U7+u8X0yR8lPSw==
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@ -7202,11 +7212,6 @@ slice-ansi@^4.0.0:
    astral-regex "^2.0.0"
    is-fullwidth-code-point "^3.0.0"

-smooth-dnd@0.12.1:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/smooth-dnd/-/smooth-dnd-0.12.1.tgz#cdb44c972355659e32770368b29b6a80e0ed96f1"
-  integrity sha512-Dndj/MOG7VP83mvzfGCLGzV2HuK1lWachMtWl/Iuk6zV7noDycIBnflwaPuDzoaapEl3Pc4+ybJArkkx9sxPZg==
-
 snake-case@3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
@ -7245,6 +7250,11 @@ snapdragon@^0.8.1:
    source-map-resolve "^0.5.0"
    use "^3.1.0"

+sortablejs@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
+  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+
 source-map-js@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
@ -8144,13 +8154,6 @@ vue-shortkey@3.1.7:
    custom-event-polyfill "^1.0.7"
    element-matches "^0.1.2"

-vue-smooth-dnd@0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/vue-smooth-dnd/-/vue-smooth-dnd-0.8.1.tgz#b1c584cfe49b830a402548b4bf08f00f68f430e5"
-  integrity sha512-eZVVPTwz4A1cs0+CjXx/ihV+gAl3QBoWQnU6+23Gp59t0WBU99z7ducBQ4FvjBamqOlg8SDOE5eFHQedxwB4Wg==
-  dependencies:
-    smooth-dnd "0.12.1"
-
 vue-template-compiler@2.6.14:
  version "2.6.14"
  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
@ -8169,6 +8172,13 @@ vue@2.6.14:
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==

+vuedraggable@^2.24.3:
+  version "2.24.3"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
+  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+  dependencies:
+    sortablejs "1.10.2"
+
 vuex@3.6.2:
  version "3.6.2"
  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"