From 3c7f8d7aa2a46a523ea66b43b8422694dd31e9c1 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Wed, 28 Jul 2021 19:56:29 +0000
Subject: [PATCH] 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>
---
 cypress/integration/list/list.spec.js         |  35 +-
 cypress/support/index.js                      |   1 +
 package.json                                  |   4 +-
 src/App.vue                                   |  20 +-
 src/components/home/navigation.vue            | 109 ++-
 src/components/tasks/add-task.vue             |   8 +-
 src/components/tasks/mixins/createTask.js     |  17 +-
 src/components/tasks/mixins/taskList.js       |  24 +-
 src/components/tasks/partials/kanban-card.vue | 111 +++
 src/helpers/applyDrag.js                      |  18 -
 src/helpers/calculateItemPosition.ts          |  19 +
 src/helpers/calculateTaskPosition.test.ts     |  18 +
 src/main.ts                                   |   2 +
 src/models/task.js                            |   3 +
 src/store/modules/kanban.js                   |   4 +-
 src/styles/components/kanban.scss             | 480 ++++++------
 src/styles/components/tasks.scss              | 542 ++++++-------
 src/styles/theme/navigation.scss              | 729 +++++++++---------
 src/styles/theme/theme.scss                   |   4 +
 src/views/list/views/Kanban.vue               | 515 +++++--------
 src/views/list/views/List.vue                 |  89 ++-
 src/views/namespaces/ListNamespaces.vue       |   4 +
 yarn.lock                                     |  34 +-
 23 files changed, 1524 insertions(+), 1266 deletions(-)
 create mode 100644 src/components/tasks/partials/kanban-card.vue
 delete mode 100644 src/helpers/applyDrag.js
 create mode 100644 src/helpers/calculateItemPosition.ts
 create mode 100644 src/helpers/calculateTaskPosition.test.ts

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index a79236d18..107b55280 100644
--- 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.
-
-//		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 .tasks .task')
+				.contains(tasks[0].title)
+				.first()
+				.drag('.kanban .bucket:nth-child(2) .tasks .dropper div')
+			
+			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, {
diff --git a/cypress/support/index.js b/cypress/support/index.js
index 74c1400d7..22ec961fa 100644
--- 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'
diff --git a/package.json b/package.json
index a1a7ba0a6..25c6d6bfb 100644
--- 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",
diff --git a/src/App.vue b/src/App.vue
index 9dae1e76c..4525a079d 100644
--- 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({
-		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,
-	}),
+	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)
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 454eb658e..498de9912 100644
--- 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,38 +73,59 @@
 					</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">
-								<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"
+						<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]}"
 								>
-									<span
-										:style="{ backgroundColor: l.hexColor }"
-										class="color-bubble"
-										v-if="l.hexColor !== ''">
-									</span>
-									<span class="list-menu-title">
-										{{ getListTitle(l) }}
-									</span>
-									<span
-										:class="{'is-favorite': l.isFavorite}"
-										@click.stop="toggleFavoriteList(l)"
-										class="favorite">
-										<icon icon="star" v-if="l.isFavorite"/>
-										<icon :icon="['far', 'star']" v-else/>
-									</span>
-								</router-link>
-								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
-								<span class="list-setting-spacer" v-else></span>
-							</li>
-						</template>
+									<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"
+											v-if="l.hexColor !== ''">
+										</span>
+										<span class="list-menu-title">
+											{{ getListTitle(l) }}
+										</span>
+										<span
+											:class="{'is-favorite': l.isFavorite}"
+											@click.stop="toggleFavoriteList(l)"
+											class="favorite">
+											<icon icon="star" v-if="l.isFavorite"/>
+											<icon :icon="['far', 'star']" v-else/>
+										</span>
+									</router-link>
+									<list-settings-dropdown :list="l" v-if="l.id > 0"/>
+									<span class="list-setting-spacer" v-else></span>
+								</li>
+							</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>
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 64f71c91f..d92854628 100644
--- 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)
diff --git a/src/components/tasks/mixins/createTask.js b/src/components/tasks/mixins/createTask.js
index 2c68c5a4f..dd0aab017 100644
--- 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,14 +39,17 @@ 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')
 			}
-			
+
 			// Separate closure because we need to wait for the results of the user search if users were entered in the
 			// task create request. Because _that_ happens in a promise, we'll need something to call when it resolves.
 			const createTask = () => {
@@ -54,6 +60,7 @@ export default {
 					priority: parsedTask.priority,
 					assignees: assignees,
 					bucketId: bucketId,
+					position: position,
 				})
 				return this.taskService.create(task)
 					.then(task => {
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
index 2a2576915..de55f9940 100644
--- 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)
+				})
+		},
 	},
 }
\ No newline at end of file
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
new file mode 100644
index 000000000..f285f1bce
--- /dev/null
+++ 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>
diff --git a/src/helpers/applyDrag.js b/src/helpers/applyDrag.js
deleted file mode 100644
index 67ada44de..000000000
--- a/src/helpers/applyDrag.js
+++ /dev/null
@@ -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
-}
diff --git a/src/helpers/calculateItemPosition.ts b/src/helpers/calculateItemPosition.ts
new file mode 100644
index 000000000..a181adcad
--- /dev/null
+++ 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
+}
\ No newline at end of file
diff --git a/src/helpers/calculateTaskPosition.test.ts b/src/helpers/calculateTaskPosition.test.ts
new file mode 100644
index 000000000..bf0caa749
--- /dev/null
+++ 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)
+})
diff --git a/src/main.ts b/src/main.ts
index bfd40b709..2303d4284 100644
--- 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)
 
diff --git a/src/models/task.js b/src/models/task.js
index 7beeca23c..91f6cff69 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -104,6 +104,9 @@ export default class TaskModel extends AbstractModel {
 			index: 0,
 			isFavorite: false,
 			subscription: null,
+			
+			position: 0,
+			kanbanPosition: 0,
 
 			createdBy: UserModel,
 			created: null,
diff --git a/src/store/modules/kanban.js b/src/store/modules/kanban.js
index ba1007ad7..89722f584 100644
--- 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
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index c63cb3f84..970d6597b 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -12,292 +12,314 @@ $crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem -
 $filter-container-height: '1rem - #{$switch-view-height}';
 
 .app-content.list\.kanban {
-  padding-bottom: 0;
+	padding-bottom: 0;
 }
 
 .kanban {
 
-  display: flex;
-  align-items: flex-start;
-  overflow-x: auto;
-  overflow-y: hidden;
-  height: calc(#{$crazy-height-calculation});
-  margin: 0 -1.5rem;
-  padding: 0 1.5rem;
+	overflow-x: auto;
+	overflow-y: hidden;
+	height: calc(#{$crazy-height-calculation});
+	margin: 0 -1.5rem;
+	padding: 0 1.5rem;
 
-  @media screen and (max-width: $tablet) {
-    height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
-  }
+	@media screen and (max-width: $tablet) {
+		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
+	}
 
-  .bucket {
-    background-color: $bucket-background;
-    border-radius: $radius;
-    position: relative;
+	&-bucket-container {
+		display: flex;
+		align-items: flex-start;
+	}
 
-    flex: 0 0 $bucket-width;
-    margin: 0 $bucket-right-margin 0 0;
-    max-height: 100%;
-    min-height: 20px;
-    max-width: $bucket-width;
+	.ghost {
+		background: transparent !important;
+		border: 3px dashed $grey-300 !important;
+		box-shadow: none !important;
 
-    .tasks {
-      max-height: calc(#{$crazy-height-calculation-tasks});
-      overflow: auto;
+		* {
+			opacity: 0;
+		}
+	}
 
-      @media screen and (max-width: $tablet) {
-        max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
-      }
+	.bucket {
+		background-color: $bucket-background;
+		border-radius: $radius;
+		position: relative;
 
-      .task {
+		margin: 0 $bucket-right-margin 0 0;
+		max-height: 100%;
+		min-height: 20px;
+		width: $bucket-width;
 
-        &:first-child {
-          margin-top: 0;
-        }
+		.tasks {
+			max-height: calc(#{$crazy-height-calculation-tasks});
+			overflow: auto;
+			margin-top: 0;
 
-        -webkit-touch-callout: none; // iOS Safari
-        -webkit-user-select: none; // Safari
-        -khtml-user-select: none; // Konqueror HTML
-        -moz-user-select: none; // Old versions of Firefox
-        -ms-user-select: none; // Internet Explorer/Edge
-        user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox
+			@media screen and (max-width: $tablet) {
+				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
+			}
 
-        transition: $ease-out;
-        cursor: pointer;
-        box-shadow: $shadow-xs;
-        display: block;
+			.task {
+				-webkit-touch-callout: none; // iOS Safari
+				-webkit-user-select: none; // Safari
+				-khtml-user-select: none; // Konqueror HTML
+				-moz-user-select: none; // Old versions of Firefox
+				-ms-user-select: none; // Internet Explorer/Edge
+				user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox
 
-        font-size: .9rem;
-        padding: .5rem;
-        margin: .5rem;
-        border-radius: $radius;
-        background: $task-background;
+				//transition: $ease-out;
+				cursor: pointer;
+				box-shadow: $shadow-xs;
+				display: block;
+				border: 3px solid transparent;
 
-        &.loader-container.is-loading:after {
-          width: 1.5rem;
-          height: 1.5rem;
-          top: calc(50% - .75rem);
-          left: calc(50% - .75rem);
-          border-width: 2px;
-        }
+				font-size: .9rem;
+				padding: .5rem;
+				margin: .5rem;
+				border-radius: $radius;
+				background: $task-background;
 
-        h3 {
-          font-family: $family-sans-serif;
-          font-size: .85rem;
-          word-break: break-word;
-        }
+				&.loader-container.is-loading:after {
+					width: 1.5rem;
+					height: 1.5rem;
+					top: calc(50% - .75rem);
+					left: calc(50% - .75rem);
+					border-width: 2px;
+				}
 
-        .progress {
-          margin: 8px 0 0 0;
-          width: 100%;
-          height: 0.5rem;
-        }
+				h3 {
+					font-family: $family-sans-serif;
+					font-size: .85rem;
+					word-break: break-word;
+				}
 
-        .due-date {
-          float: right;
-          display: flex;
-          align-items: center;
+				.progress {
+					margin: 8px 0 0 0;
+					width: 100%;
+					height: 0.5rem;
+				}
 
-          .icon {
-            margin-right: .25rem;
-          }
+				.due-date {
+					float: right;
+					display: flex;
+					align-items: center;
 
-          &.overdue {
-            color: $red;
-          }
-        }
+					.icon {
+						margin-right: .25rem;
+					}
 
-        .label-wrapper .tag {
-          margin: .5rem .5rem 0 0;
-        }
+					&.overdue {
+						color: $red;
+					}
+				}
 
-        .footer {
-          background: transparent;
-          padding: 0;
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
+				.label-wrapper .tag {
+					margin: .5rem .5rem 0 0;
+				}
 
-          .tag, .assignees, .icon, .priority-label {
-            margin-top: .25rem;
-            margin-right: .25rem;
-          }
+				.footer {
+					background: transparent;
+					padding: 0;
+					display: flex;
+					flex-wrap: wrap;
+					align-items: center;
 
-          .assignees {
-            display: flex;
+					.tag, .assignees, .icon, .priority-label {
+						margin-top: .25rem;
+						margin-right: .25rem;
+					}
 
-            .user {
-              display: inline;
-              margin: 0;
+					.assignees {
+						display: flex;
 
-              img {
-                margin: 0;
-              }
-            }
-          }
+						.user {
+							display: inline;
+							margin: 0;
 
-          .tag {
-            margin-left: 0;
-          }
+							img {
+								margin: 0;
+							}
+						}
+					}
 
-          .priority-label {
-            font-size: .75rem;
-            height: 2rem;
+					.tag {
+						margin-left: 0;
+					}
 
-            .icon {
-              height: 1rem;
-              padding: 0 .25rem;
-              margin-top: 0;
-            }
-          }
-        }
+					.priority-label {
+						font-size: .75rem;
+						height: 2rem;
 
-        .footer .icon,
-        .due-date,
-        .priority-label {
-          background: $grey-100;
-          border-radius: $radius;
-          padding: 0 .5rem;
-        }
+						.icon {
+							height: 1rem;
+							padding: 0 .25rem;
+							margin-top: 0;
+						}
+					}
+				}
 
-        .due-date {
-          padding: 0 .25rem;
-        }
+				.footer .icon,
+				.due-date,
+				.priority-label {
+					background: $grey-100;
+					border-radius: $radius;
+					padding: 0 .5rem;
+				}
 
-        .task-id {
-          color: $grey-500;
-          font-size: .8rem;
-          margin-bottom: .25rem;
-          display: flex;
-        }
+				.due-date {
+					padding: 0 .25rem;
+				}
 
-        .is-done {
-          font-size: .75rem;
-          padding: .2rem .3rem;
-          margin: 0 .25rem 0 0;
-        }
+				.task-id {
+					color: $grey-500;
+					font-size: .8rem;
+					margin-bottom: .25rem;
+					display: flex;
+				}
 
-        &.is-moving {
-          opacity: .5;
-        }
+				.is-done {
+					font-size: .75rem;
+					padding: .2rem .3rem;
+					margin: 0 .25rem 0 0;
+				}
 
-        span {
-          width: auto;
-        }
+				&.is-moving {
+					opacity: .5;
+				}
 
-        &.has-light-text {
-          color: $white;
+				span {
+					width: auto;
+				}
 
-          .task-id {
-            color: $grey-200;
-          }
+				&.has-light-text {
+					color: $white;
 
-          .footer .icon,
-          .due-date,
-          .priority-label {
-            background: $grey-800;
-          }
+					.task-id {
+						color: $grey-200;
+					}
 
-          .footer {
-            .icon svg {
-              fill: $white;
-            }
-          }
-        }
-      }
+					.footer .icon,
+					.due-date,
+					.priority-label {
+						background: $grey-800;
+					}
 
-      .drop-preview {
-        border-radius: $radius;
-        margin: 0 .5rem .5rem;
-        background: transparent;
-        border: 3px dashed $grey-300;
-      }
-    }
+					.footer {
+						.icon svg {
+							fill: $white;
+						}
+					}
+				}
 
-    h2 {
-      font-size: 1rem;
-      margin: 0;
-      font-weight: 600 !important;
-    }
+				&.v-leave, &.v-leave-to, &.v-leave-active
+				&.move-card-leave, &.move-card-leave-to, &.move-card-leave-active {
+					display: none;
+				}
+			}
 
-    &.new-bucket {
-      // Because of reasons, this button ignores the margin we gave it to the right.
-      // To make it still look like it has some, we modify the container to have a padding of 1rem,
-      // which is the same as the margin it should have. Then we make the container itself bigger
-      // to hide the fact we just made the button smaller.
-      min-width: calc(#{$bucket-width} + 1rem);
-      background: transparent;
-      padding-right: 1rem;
+			.dropper {
+				&, > div {
+					min-height: 40px;
+				}
+			}
+		}
 
-      .button {
-        background: $bucket-background;
-        width: 100%;
-      }
-    }
+		.move-card-move {
+			transition: transform $transition-duration;
+		}
 
-    a.dropdown-item {
-      padding-right: 1rem;
-    }
+		.no-move {
+			transition: transform 0s;
+		}
 
-    &.is-collapsed {
-      transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
-      // Using negative margins instead of translateY here to make all other buckets fill the empty space
-      margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1;
-      margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin});
-      cursor: pointer;
+		h2 {
+			font-size: 1rem;
+			margin: 0;
+			font-weight: 600 !important;
+		}
 
-      .tasks, .bucket-footer {
-        display: none;
-      }
-    }
-  }
+		&.new-bucket {
+			// Because of reasons, this button ignores the margin we gave it to the right.
+			// To make it still look like it has some, we modify the container to have a padding of 1rem,
+			// which is the same as the margin it should have. Then we make the container itself bigger
+			// to hide the fact we just made the button smaller.
+			min-width: calc(#{$bucket-width} + 1rem);
+			background: transparent;
+			padding-right: 1rem;
 
-  .bucket-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: .5rem;
-    height: $bucket-header-height;
+			.button {
+				background: $bucket-background;
+				width: 100%;
+			}
+		}
 
-    .limit {
-      padding-left: .5rem;
-      font-weight: bold;
+		a.dropdown-item {
+			padding-right: 1rem;
+		}
 
-      &.is-max {
-        color: $red;
-      }
-    }
+		&.is-collapsed {
+			transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
+			// Using negative margins instead of translateY here to make all other buckets fill the empty space
+			margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1;
+			margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin});
+			cursor: pointer;
 
-    .title.input {
-      height: auto;
-      padding: .4rem .5rem;
-      display: inline-block;
-    }
-  }
+			.tasks, .bucket-footer {
+				display: none;
+			}
+		}
+	}
 
-  .dropdown-trigger {
-    cursor: pointer;
-    padding: .5rem;
-  }
+	.bucket-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: .5rem;
+		height: $bucket-header-height;
 
-  .bucket-footer {
-    padding: .5rem;
+		.limit {
+			padding-left: .5rem;
+			font-weight: bold;
 
-    .button {
-      background-color: transparent;
+			&.is-max {
+				color: $red;
+			}
+		}
 
-      &:hover {
-        background-color: $white;
-      }
-    }
-  }
+		.title.input {
+			height: auto;
+			padding: .4rem .5rem;
+			display: inline-block;
+			cursor: pointer;
+		}
+	}
+
+	.dropdown-trigger {
+		cursor: pointer;
+		padding: .5rem;
+	}
+
+	.bucket-footer {
+		padding: .5rem;
+
+		.button {
+			background-color: transparent;
+
+			&:hover {
+				background-color: $white;
+			}
+		}
+	}
 }
 
-.ghost-task {
-  transition: transform 0.18s ease;
-  transform: rotateZ(3deg)
+.task-dragging {
+	transition: transform 0.18s ease;
+	transform: rotateZ(3deg)
 }
 
 .ghost-task-drop {
-  transition: transform 0.18s ease-in-out;
-  transform: rotateZ(0deg)
+	transition: transform 0.18s ease-in-out;
+	transform: rotateZ(0deg)
 }
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index db9ed108d..afb076303 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -1,341 +1,363 @@
 .tasks-container {
-  display: flex;
+	display: flex;
 
-  .tasks {
-    width: 100%;
-  }
+	.tasks {
+		width: 100%;
 
-  .taskedit {
-    width: 50%;
-  }
+		.ghost {
+			border-radius: $radius;
+			background: $grey-100;
+			border: 2px dashed $grey-300;
+
+			* {
+				opacity: 0;
+			}
+		}
+	}
+
+	.taskedit {
+		width: 50%;
+	}
 }
 
 .tasks {
-  margin-top: 1rem;
-  padding: 0;
-  text-align: left;
+	margin-top: 1rem;
+	padding: 0;
+	text-align: left;
 
-  @media screen and (min-width: $tablet) {
-    &.short {
-      max-width: 53vw;
-    }
-  }
+	@media screen and (min-width: $tablet) {
+		&.short {
+			max-width: 53vw;
+		}
+	}
 
-  @media screen and (max-width: $tablet) {
-    max-width: 100%;
-  }
+	@media screen and (max-width: $tablet) {
+		max-width: 100%;
+	}
 
-  &.noborder {
-    margin: 1rem -0.5rem;
-  }
+	&.noborder {
+		margin: 1rem -0.5rem;
+	}
 
-  .task {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0.5rem;
-    transition: background-color $transition;
-    align-items: center;
-    cursor: pointer;
-    margin: 0 .5rem;
-    border-radius: $radius;
+	.task {
+		display: flex;
+		flex-wrap: wrap;
+		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;
-    }
+		&:first-child {
+			margin-top: .5rem;
+		}
 
-    &:last-child {
-      margin-bottom: .5rem;
-    }
+		&:last-child {
+			margin-bottom: .5rem;
+		}
 
-    &:hover {
-      background-color: $grey-100;
-    }
+		&:hover {
+			background-color: $grey-100;
+		}
 
-    .tasktext,
-    &.tasktext {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: inline-block;
-      flex: 1 0 50%;
+		.tasktext,
+		&.tasktext {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			display: inline-block;
+			flex: 1 0 50%;
 
-      .overdue {
-        color: $red;
-      }
-    }
+			.overdue {
+				color: $red;
+			}
+		}
 
-    .task-list {
-      width: auto;
-      color: $grey-400;
-      font-size: .9rem;
-      white-space: nowrap;
-    }
+		.task-list {
+			width: auto;
+			color: $grey-400;
+			font-size: .9rem;
+			white-space: nowrap;
+		}
 
-    .fancycheckbox span {
-      display: none;
-    }
+		.fancycheckbox span {
+			display: none;
+		}
 
-    .color-bubble {
-      height: 10px;
-      flex: 0 0 10px;
-    }
+		.color-bubble {
+			height: 10px;
+			flex: 0 0 10px;
+		}
 
-    .tag {
-      margin: 0 0.5rem;
-    }
+		.tag {
+			margin: 0 0.5rem;
+		}
 
-    .avatar {
-      border-radius: 50%;
-      vertical-align: bottom;
-      margin-left: 5px;
-      height: 27px;
-      width: 27px;
-    }
+		.avatar {
+			border-radius: 50%;
+			vertical-align: bottom;
+			margin-left: 5px;
+			height: 27px;
+			width: 27px;
+		}
 
-    .list-task-icon {
-      margin-left: 6px;
+		.list-task-icon {
+			margin-left: 6px;
 
-      &:not(:first-of-type) {
-        margin-left: 8px;
-      }
-        
-    }
+			&:not(:first-of-type) {
+				margin-left: 8px;
+			}
 
-    a {
-      color: $text;
-      transition: color ease $transition-duration;
+		}
 
-      &:hover {
-        color: $grey-900;
-      }
-    }
+		a {
+			color: $text;
+			transition: color ease $transition-duration;
 
-    .favorite {
-      opacity: 0;
-      text-align: center;
-      width: 27px;
-      transition: opacity $transition, color $transition;
+			&:hover {
+				color: $grey-900;
+			}
+		}
 
-      &:hover {
-        color: $orange;
-      }
+		.favorite {
+			opacity: 0;
+			text-align: center;
+			width: 27px;
+			transition: opacity $transition, color $transition;
 
-      &.is-favorite {
-        opacity: 1;
-        color: $orange;
-      }
-    }
+			&:hover {
+				color: $orange;
+			}
 
-    &:hover .favorite {
-      opacity: 1;
-    }
+			&.is-favorite {
+				opacity: 1;
+				color: $orange;
+			}
+		}
 
-    .fancycheckbox {
-      height: 18px;
-      padding-top: 0;
-      padding-right: .5rem;
+		&:hover .favorite {
+			opacity: 1;
+		}
 
-      span {
-        display: none;
-      }
-    }
+		.handle {
+			opacity: 0;
+			transition: opacity $transition;
+			margin-right: .25rem;
+			cursor: grab;
+		}
 
-    .tasktext.done {
-      text-decoration: line-through;
-      color: $grey-500;
-    }
+		&:hover .handle {
+			opacity: 1;
+		}
 
-    span.parent-tasks {
-      color: $grey-500;
-      width: auto;
-    }
+		.fancycheckbox {
+			height: 18px;
+			padding-top: 0;
+			padding-right: .5rem;
 
-    .remove {
-      color: $red;
-    }
+			span {
+				display: none;
+			}
+		}
 
-    input[type="checkbox"] {
-      vertical-align: middle;
-    }
+		.tasktext.done {
+			text-decoration: line-through;
+			color: $grey-500;
+		}
 
-    .settings {
-      float: right;
-      width: 24px;
-      cursor: pointer;
-    }
+		span.parent-tasks {
+			color: $grey-500;
+			width: auto;
+		}
 
-    &.loader-container.is-loading:after {
-      top: calc(50% - 1rem);
-      left: calc(50% - 1rem);
-      width: 2rem;
-      height: 2rem;
-      border-left-color: $grey-300;
-      border-bottom-color: $grey-300;
-    }
-  }
+		.remove {
+			color: $red;
+		}
 
-  .progress {
-    width: 50px;
-    margin: 0 0.5rem 0 0;
-    flex: 3 1 auto;
+		input[type="checkbox"] {
+			vertical-align: middle;
+		}
 
-    @media screen and (max-width: $tablet) {
-      margin: 0.5rem 0 0 0;
-      order: 1;
-      width: 100%;
-    }
-  }
+		.settings {
+			float: right;
+			width: 24px;
+			cursor: pointer;
+		}
 
-  .task:last-child {
-    border-bottom: none;
-  }
+		&.loader-container.is-loading:after {
+			top: calc(50% - 1rem);
+			left: calc(50% - 1rem);
+			width: 2rem;
+			height: 2rem;
+			border-left-color: $grey-300;
+			border-bottom-color: $grey-300;
+		}
+	}
+
+	.progress {
+		width: 50px;
+		margin: 0 0.5rem 0 0;
+		flex: 3 1 auto;
+
+		@media screen and (max-width: $tablet) {
+			margin: 0.5rem 0 0 0;
+			order: 1;
+			width: 100%;
+		}
+	}
+
+	.task:last-child {
+		border-bottom: none;
+	}
 }
 
 .is-menu-enabled .tasks .task {
-  span:not(.tag), a {
-    .tasktext, &.tasktext {
-	  @media screen and (max-width: $desktop) {
-	    max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
-      }
+	span:not(.tag), a {
+		.tasktext, &.tasktext {
+			@media screen and (max-width: $desktop) {
+				max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+			}
 
-	  // Duplicated rule to have it work properly in at least some browsers
-	  // This should be fine as the ui doesn't work in rare edge cases to begin with
-	  @media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
-	    max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
-      }
+			// Duplicated rule to have it work properly in at least some browsers
+			// This should be fine as the ui doesn't work in rare edge cases to begin with
+			@media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
+				max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+			}
+		}
 	}
-  }
 }
 
 .taskedit {
-  min-height: calc(100% - 1rem);
-  margin-top: 1rem;
+	min-height: calc(100% - 1rem);
+	margin-top: 1rem;
 
-  .priority-select {
-    .select, select {
-      width: 100%;
-    }
-  }
+	.priority-select {
+		.select, select {
+			width: 100%;
+		}
+	}
 
-  ul.assingees {
-    list-style: none;
-    margin: 0;
+	ul.assingees {
+		list-style: none;
+		margin: 0;
 
-    li {
-      padding: 0.5rem 0.5rem 0;
+		li {
+			padding: 0.5rem 0.5rem 0;
 
-      a {
-        float: right;
-        color: $red;
-        transition: all $transition;
-      }
-    }
-  }
+			a {
+				float: right;
+				color: $red;
+				transition: all $transition;
+			}
+		}
+	}
 
-  .tag {
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
+	.tag {
+		margin-right: 0.5rem;
+		margin-bottom: 0.5rem;
 
-    &:last-child {
-      margin-right: 0;
-    }
-  }
+		&:last-child {
+			margin-right: 0;
+		}
+	}
 }
 
 .show-tasks {
-  h3 {
-    text-align: left;
+	h3 {
+		text-align: left;
 
-    &.nothing {
-      text-align: center;
-      margin-top: 3rem;
-    }
+		&.nothing {
+			text-align: center;
+			margin-top: 3rem;
+		}
 
-    .input {
-      width: 190px;
-      vertical-align: middle;
-      margin: .5rem 0;
-    }
-  }
+		.input {
+			width: 190px;
+			vertical-align: middle;
+			margin: .5rem 0;
+		}
+	}
 
-  img {
-    margin-top: 2rem;
-  }
+	img {
+		margin-top: 2rem;
+	}
 
-  .user img{
-    margin: 0;
-  }
+	.user img {
+		margin: 0;
+	}
 
-  .spinner.is-loading:after {
-    margin-left: calc(40% - 1rem);
-  }
+	.spinner.is-loading:after {
+		margin-left: calc(40% - 1rem);
+	}
 }
 
 .defer-task {
-  $defer-task-max-width: 350px;
+	$defer-task-max-width: 350px;
 
-  position: absolute;
-  width: 100%;
-  max-width: $defer-task-max-width;
-  border-radius: $radius;
-  border: 1px solid $grey-200;
-  padding: 1rem;
-  margin: 1rem;
-  background: $white;
-  color: $text;
-  cursor: default;
-  z-index: 10;
-  box-shadow: $shadow-lg;
+	position: absolute;
+	width: 100%;
+	max-width: $defer-task-max-width;
+	border-radius: $radius;
+	border: 1px solid $grey-200;
+	padding: 1rem;
+	margin: 1rem;
+	background: $white;
+	color: $text;
+	cursor: default;
+	z-index: 10;
+	box-shadow: $shadow-lg;
 
-  input.input {
-    display: none;
-  }
+	input.input {
+		display: none;
+	}
 
-  .flatpickr-calendar {
-    margin: 0 auto;
-    box-shadow: none;
+	.flatpickr-calendar {
+		margin: 0 auto;
+		box-shadow: none;
 
-    span {
-      width: auto !important;
-    }
-  }
+		span {
+			width: auto !important;
+		}
+	}
 
-  .defer-days {
-    justify-content: space-between;
-    display: flex;
-    margin: .5rem 0;
-  }
+	.defer-days {
+		justify-content: space-between;
+		display: flex;
+		margin: .5rem 0;
+	}
 
-  @media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
-    left: .5rem;
-    right: .5rem;
-    max-width: 100%;
-    width: calc(100vw - 1rem - 2rem);
+	@media screen and (max-width: ($defer-task-max-width + 100px)) { // 100px is roughly the size the pane is pulled to the right
+		left: .5rem;
+		right: .5rem;
+		max-width: 100%;
+		width: calc(100vw - 1rem - 2rem);
 
-    .flatpickr-calendar {
-      max-width: 100%;
+		.flatpickr-calendar {
+			max-width: 100%;
 
-      .flatpickr-innerContainer {
-        overflow: scroll;
-      }
-    }
-  }
+			.flatpickr-innerContainer {
+				overflow: scroll;
+			}
+		}
+	}
 }
 
 .is-max-width-desktop .tasks .task {
-  max-width: $desktop;
+	max-width: $desktop;
 }
 
 .tasktext {
-  :focus {
-    box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
-  }
+	:focus {
+		box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
+	}
 
-  :focus:not(:focus-visible) {
-    outline: 0;
-  }
+	:focus:not(:focus-visible) {
+		outline: 0;
+	}
 
-  :focus-visible, :-moz-focusring {
-    box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
-  }
+	:focus-visible, :-moz-focusring {
+		box-shadow: inset 0 0 0 2px rgba($primary, 0.5);
+	}
 }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index ff8304086..9201c350c 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,397 +1,432 @@
 @use "sass:math";
 
 .navbar {
-  z-index: 4 !important;
+	z-index: 4 !important;
 
-  .navbar-dropdown {
-    box-shadow: $navbar-dropdown-boxed-shadow;
-    top: 101%;
-  }
+	.navbar-dropdown {
+		box-shadow: $navbar-dropdown-boxed-shadow;
+		top: 101%;
+	}
 
-  .navbar-brand {
-    display: flex;
-    align-items: center;
+	.navbar-brand {
+		display: flex;
+		align-items: center;
 
-    .logo img {
-      width: $vikunja-nav-logo-full-width;
-    }
-  }
+		.logo img {
+			width: $vikunja-nav-logo-full-width;
+		}
+	}
 }
 
 .navbar.main-theme {
-  background: $light-background;
-  z-index: 5 !important;
-  justify-content: space-between;
-  align-items: center;
+	background: $light-background;
+	z-index: 5 !important;
+	justify-content: space-between;
+	align-items: center;
 
-  .title {
-    margin: 0;
-    font-size: 1.75rem;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+	.title {
+		margin: 0;
+		font-size: 1.75rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
 
-  .navbar-end {
-    margin-left: 0;
-    align-items: center;
-    display: flex;
-  }
+	.navbar-end {
+		margin-left: 0;
+		align-items: center;
+		display: flex;
+	}
 
-  @media screen and (max-width: $desktop) {
-    display: flex;
-    justify-content: space-between;
+	@media screen and (max-width: $desktop) {
+		display: flex;
+		justify-content: space-between;
 
-    @media screen and (max-width: $tablet) {
-      .navbar-brand {
-        display: none;
-      }
+		@media screen and (max-width: $tablet) {
+			.navbar-brand {
+				display: none;
+			}
 
-      .user {
-        width: $user-dropdown-width-mobile;
-        display: flex;
-        align-items: center;
+			.user {
+				width: $user-dropdown-width-mobile;
+				display: flex;
+				align-items: center;
 
-        .dropdown-trigger {
-          line-height: 1;
+				.dropdown-trigger {
+					line-height: 1;
 
-          .button {
-            padding: 0 0.25rem;
-            height: 1rem;
+					.button {
+						padding: 0 0.25rem;
+						height: 1rem;
 
-            .icon {
-              width: .5rem;
-            }
-          }
-        }
+						.icon {
+							width: .5rem;
+						}
+					}
+				}
 
-        .username {
-          display: none;
-        }
-      }
-    }
-  }
+				.username {
+					display: none;
+				}
+			}
+		}
+	}
 }
 
 .navbar-menu .navbar-item .icon {
-  margin: 0 0.5rem;
+	margin: 0 0.5rem;
 }
 
 .app-container {
-  .namespace-container {
-    background: $vikunja-nav-background;
-    z-index: 6;
-    color: $vikunja-nav-color;
-    padding: 0;
-    transition: all $transition;
-    position: fixed;
-    bottom: 0;
-    top: $navbar-height;
-    overflow-x: auto;
-    width: $navbar-width;
+	.namespace-container {
+		background: $vikunja-nav-background;
+		z-index: 6;
+		color: $vikunja-nav-color;
+		padding: 0;
+		transition: all $transition;
+		position: fixed;
+		bottom: 0;
+		top: $navbar-height;
+		overflow-x: auto;
+		width: $navbar-width;
 
-    padding: 0 0 1rem;
-    left: -147vw;
-    bottom: 0;
+		padding: 0 0 1rem;
+		left: -147vw;
+		bottom: 0;
 
-    @media screen and (max-width: $tablet) {
-      top: 0;
-      width: 70vw;
-    }
+		@media screen and (max-width: $tablet) {
+			top: 0;
+			width: 70vw;
+		}
 
-    &.is-active {
-      left: 0;
-    }
+		&.is-active {
+			left: 0;
+		}
 
-    .menu {
-      .menu-label {
-        font-size: 1rem;
-        font-weight: 700;
-        font-weight: bold;
-        font-family: $vikunja-font;
-        color: $vikunja-nav-color;
-        font-weight: 500;
-        min-height: 2.5rem;
-        padding-top: 0;
-        padding-left: $navbar-padding;
+		.menu {
+			.menu-label {
+				font-size: 1rem;
+				font-weight: 700;
+				font-weight: bold;
+				font-family: $vikunja-font;
+				color: $vikunja-nav-color;
+				font-weight: 500;
+				min-height: 2.5rem;
+				padding-top: 0;
+				padding-left: $navbar-padding;
 
-        overflow: hidden;
-      }
+				overflow: hidden;
+			}
 
-      .menu-label, .menu-list span.list-menu-link, .menu-list a {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        cursor: pointer;
+			.menu-label, .menu-list span.list-menu-link, .menu-list a {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				cursor: pointer;
 
-        .list-menu-title {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 100%;
-        }
+				.list-menu-title {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					width: 100%;
+				}
 
-        .color-bubble {
-          height: 12px;
-          flex: 0 0 12px;
-        }
+				.color-bubble {
+					height: 12px;
+					flex: 0 0 12px;
+				}
 
-        .favorite {
-          margin-left: .25rem;
-          transition: opacity $transition, color $transition;
-          opacity: 0;
+				.favorite {
+					margin-left: .25rem;
+					transition: opacity $transition, color $transition;
+					opacity: 0;
 
-          &:hover {
-            color: $orange;
-          }
+					&:hover {
+						color: $orange;
+					}
 
-          &.is-favorite {
-            opacity: 1;
-            color: $orange;
-          }
-        }
+					&.is-favorite {
+						opacity: 1;
+						color: $orange;
+					}
+				}
 
-        &:hover .favorite {
-          opacity: 1;
-        }
-      }
+				&:hover .favorite {
+					opacity: 1;
+				}
+			}
 
-      .menu-label {
-        .color-bubble {
-          width: 14px !important;
-          height: 14px !important;
-        }
+			.menu-label {
+				.color-bubble {
+					width: 14px !important;
+					height: 14px !important;
+				}
 
-        .is-archived {
-          min-width: 85px;
-        }
-      }
+				.is-archived {
+					min-width: 85px;
+				}
+			}
 
-      .namespace-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+			.namespace-title {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
 
-        .menu-label {
-          margin-bottom: 0;
-          flex: 1 1 auto;
+				.menu-label {
+					margin-bottom: 0;
+					flex: 1 1 auto;
 
-          .name {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
+					.name {
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+				}
 
-        a:not(.dropdown-item) {
-          color: $vikunja-nav-color;
-          padding: 0 .25rem;
-        }
+				a:not(.dropdown-item) {
+					color: $vikunja-nav-color;
+					padding: 0 .25rem;
+				}
 
-        .dropdown-trigger {
-          padding: .5rem;
-          cursor: pointer;
-        }
+				.dropdown-trigger {
+					padding: .5rem;
+					cursor: pointer;
+				}
 
-        .toggle-lists-icon {
-          svg {
-            transition: all $transition;
-            transform: rotate(90deg);
-            opacity: 1;
-          }
+				.toggle-lists-icon {
+					svg {
+						transition: all $transition;
+						transform: rotate(90deg);
+						opacity: 1;
+					}
 
-          &.active svg {
-            transform: rotate(0deg);
-            opacity: 0;
-          }
-        }
+					&.active svg {
+						transform: rotate(0deg);
+						opacity: 0;
+					}
+				}
 
-        &:hover .toggle-lists-icon svg {
-          opacity: 1;
-        }
+				&:hover .toggle-lists-icon svg {
+					opacity: 1;
+				}
 
-        &:not(.has-menu) .toggle-lists-icon {
-          padding-right: 1rem;
-        }
-      }
+				&:not(.has-menu) .toggle-lists-icon {
+					padding-right: 1rem;
+				}
+			}
 
-      .menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
-        color: $vikunja-nav-color;
-      }
+			.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
+				color: $vikunja-nav-color;
+			}
 
-      .menu-list {
-        li {
-          height: 44px;
-          display: flex;
-          align-items: center;
+			.menu-list {
+				li {
+					height: 44px;
+					display: flex;
+					align-items: center;
 
-          .dropdown-trigger {
-            opacity: 0;
-            padding: .5rem;
-            cursor: pointer;
-            transition: $transition;
-          }
+					.dropdown-trigger {
+						opacity: 0;
+						padding: .5rem;
+						cursor: pointer;
+						transition: $transition;
+					}
 
-          &:hover {
-            background: $white;
+					&:hover {
+						background: $white;
 
-            .dropdown-trigger {
-              opacity: 1;
-            }
-          }
-        }
+						.dropdown-trigger {
+							opacity: 1;
+						}
+					}
 
-        a:hover {
-          background: transparent;
-        }
+					&.loader-container.is-loading:after {
+						width: 1.5rem;
+						height: 1.5rem;
+						top: calc(50% - .75rem);
+						left: calc(50% - .75rem);
+						border-width: 2px;
+					}
+				}
 
-        span.list-menu-link, li > a {
-          padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
-          transition: all 0.2s ease;
+				.flip-list-move {
+					transition: transform $transition-duration;
+				}
 
-          -webkit-border-radius: 0;
-          -moz-border-radius: 0;
-          border-radius: 0;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          width: 100%;
-          border-left: $vikunja-nav-selected-width solid transparent;
+				.ghost {
+					background: $grey-200;
 
-          .icon {
-            height: 1rem;
-            vertical-align: middle;
-            padding-bottom: 4px;
-            padding-right: 0.5rem;
-          }
+					* {
+						opacity: 0;
+					}
+				}
 
-          &.router-link-exact-active {
-            color: $primary;
-            border-left: $vikunja-nav-selected-width solid $primary;
+				a:hover {
+					background: transparent;
+				}
 
-            .icon {
-              color: $primary;
-            }
-          }
+				span.list-menu-link, li > a {
+					padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
+					transition: all 0.2s ease;
 
-          &:hover {
-            border-left: $vikunja-nav-selected-width solid $primary;
-          }
-        }
-      }
+					-webkit-border-radius: 0;
+					-moz-border-radius: 0;
+					border-radius: 0;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					width: 100%;
+					border-left: $vikunja-nav-selected-width solid transparent;
 
-      .logo {
-        display: none;
+					.icon {
+						height: 1rem;
+						vertical-align: middle;
+						padding-right: 0.5rem;
+						
+						&.handle {
+							opacity: 0;
+							transition: opacity $transition;
+							margin-right: .25rem;
+							cursor: grab;
+						}
 
-        @media screen and (max-width: $tablet) {
-          display: block;
-        }
-      }
+					}
+					
+					&:hover .icon.handle {
+						opacity: 1;
+					}
 
-      &.namespaces-lists {
-        padding-top: math.div($navbar-padding, 2);
-      }
+					&.router-link-exact-active {
+						color: $primary;
+						border-left: $vikunja-nav-selected-width solid $primary;
 
-      &.loader-container.is-loading:after {
-        width: 1.5rem;
-        height: 1.5rem;
-        top: calc(50% - .75rem);
-        left: calc(50% - .75rem);
-        border-width: 2px;
-      }
+						.icon {
+							color: $primary;
+						}
+					}
 
-      .icon {
-        color: $grey-400 !important;
-      }
-    }
+					&:hover {
+						border-left: $vikunja-nav-selected-width solid $primary;
+					}
+				}
+			}
 
-    .top-menu {
-      margin-top: math.div($navbar-padding, 2);
+			.logo {
+				display: none;
 
-      .menu-list {
-        li {
-          font-weight: 500;
-          font-family: $vikunja-font;
-        }
+				@media screen and (max-width: $tablet) {
+					display: block;
+				}
+			}
 
-        span.list-menu-link, li > a {
-          padding-left: 2rem;
-          display: inline-block;
-        }
-      }
+			&.namespaces-lists {
+				padding-top: math.div($navbar-padding, 2);
+			}
 
-    }
-  }
+			&.loader-container.is-loading:after {
+				width: 1.5rem;
+				height: 1.5rem;
+				top: calc(50% - .75rem);
+				left: calc(50% - .75rem);
+				border-width: 2px;
+			}
+
+			.icon {
+				color: $grey-400 !important;
+			}
+		}
+
+		.top-menu {
+			margin-top: math.div($navbar-padding, 2);
+
+			.menu-list {
+				li {
+					font-weight: 500;
+					font-family: $vikunja-font;
+				}
+
+				span.list-menu-link, li > a {
+					padding-left: 2rem;
+					display: inline-block;
+					
+					.icon {
+						padding-bottom: .25rem;
+					}
+				}
+			}
+
+		}
+	}
 }
 
 .navbar {
-  .trigger-button {
-    cursor: pointer;
-    color: $grey-400;
-    padding: .5rem;
-    font-size: 1.25rem;
-    position: relative;
-  }
+	.trigger-button {
+		cursor: pointer;
+		color: $grey-400;
+		padding: .5rem;
+		font-size: 1.25rem;
+		position: relative;
+	}
 
-  > * > .trigger-button {
-    width: $navbar-icon-width;
-  }
+	> * > .trigger-button {
+		width: $navbar-icon-width;
+	}
 
-  .user {
-	display: flex;
-	align-items: center;
+	.user {
+		display: flex;
+		align-items: center;
 
-    span {
-      font-family: $vikunja-font;
-    }
+		span {
+			font-family: $vikunja-font;
+		}
 
-    .avatar {
-      -webkit-border-radius: 100%;
-      -moz-border-radius: 100%;
-      border-radius: 100%;
-      vertical-align: middle;
-      height: 40px;
-    }
+		.avatar {
+			-webkit-border-radius: 100%;
+			-moz-border-radius: 100%;
+			border-radius: 100%;
+			vertical-align: middle;
+			height: 40px;
+		}
 
-    .logout-icon {
-      color: $grey-900;
+		.logout-icon {
+			color: $grey-900;
 
-      .icon {
-        vertical-align: middle;
-      }
-    }
+			.icon {
+				vertical-align: middle;
+			}
+		}
 
-    .dropdown-trigger .button {
-      background: none;
+		.dropdown-trigger .button {
+			background: none;
 
-      &:focus:not(:active), &:active {
-        outline: none !important;
-        -webkit-box-shadow: none !important;
-        -moz-box-shadow: none !important;
-        box-shadow: none !important;
-      }
-    }
-  }
+			&:focus:not(:active), &:active {
+				outline: none !important;
+				-webkit-box-shadow: none !important;
+				-moz-box-shadow: none !important;
+				box-shadow: none !important;
+			}
+		}
+	}
 }
 
 .menu-hide-button, .menu-show-button {
-  display: none;
-  z-index: 31;
-  font-weight: bold;
-  font-size: 2rem;
-  color: $grey-400;
-  line-height: 1;
-  transition: all $transition;
+	display: none;
+	z-index: 31;
+	font-weight: bold;
+	font-size: 2rem;
+	color: $grey-400;
+	line-height: 1;
+	transition: all $transition;
 
-  &:hover, &:focus {
-	height: 1rem;
-    color: $grey-600;
-  }
+	&:hover, &:focus {
+		height: 1rem;
+		color: $grey-600;
+	}
 }
 
 .menu-show-button {
 	height: .75rem;
 	width: 2rem;
-	
+
 	&:before, &:after {
 		display: block;
 		content: '';
@@ -399,18 +434,18 @@
 		border-radius: $radius;
 		transition: all $transition;
 	}
-	
+
 	&:before {
 		margin-bottom: .5rem;
 	}
-	
+
 	&:after {
 		margin-top: .5rem;
 	}
 
 	&:hover, &:focus {
 		color: $grey-600;
-		
+
 		&:before {
 			margin-bottom: .75rem;
 		}
@@ -422,61 +457,61 @@
 }
 
 .menu-hide-button {
-  position: fixed;
+	position: fixed;
 
-  &:hover, &:focus {
-    color: $text;
-  }
+	&:hover, &:focus {
+		color: $text;
+	}
 }
 
 .navbar-brand .menu-show-button {
-  display: block;
+	display: block;
 }
 
 .mobile-overlay {
-  display: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(250, 250, 250, 0.8);
-  z-index: 5;
-  opacity: 0;
-  transition: all $transition;
+	display: none;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: rgba(250, 250, 250, 0.8);
+	z-index: 5;
+	opacity: 0;
+	transition: all $transition;
 }
 
 @media screen and (max-width: $tablet) {
-  .menu-hide-button {
-    display: block;
-    top: $hamburger-menu-icon-spacing;
-    right: $hamburger-menu-icon-spacing;
-  }
+	.menu-hide-button {
+		display: block;
+		top: $hamburger-menu-icon-spacing;
+		right: $hamburger-menu-icon-spacing;
+	}
 
-  .menu-show-button {
-    display: block;
-    margin-left: $hamburger-menu-icon-spacing;
-  }
+	.menu-show-button {
+		display: block;
+		margin-left: $hamburger-menu-icon-spacing;
+	}
 
-  .mobile-overlay {
-    display: block;
-    opacity: 1;
-  }
+	.mobile-overlay {
+		display: block;
+		opacity: 1;
+	}
 
-  .navbar.is-dark .navbar-brand > .navbar-item {
-    margin: 0 auto;
-  }
+	.navbar.is-dark .navbar-brand > .navbar-item {
+		margin: 0 auto;
+	}
 }
 
 .logout-icon {
-  margin-right: 0.85rem !important;
+	margin-right: 0.85rem !important;
 }
 
 .menu-bottom-link {
-  width: 100%;
-  color: $grey-300;
-  text-align: center;
-  display: block;
-  margin: 1rem 0;
-  font-size: .8rem;
+	width: 100%;
+	color: $grey-300;
+	text-align: center;
+	display: block;
+	margin: 1rem 0;
+	font-size: .8rem;
 }
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index a9f587f99..8555384ed 100644
--- 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;
+}
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index d7afcc4f5..64d26d419 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -16,217 +16,165 @@
 				v-model="params"
 			/>
 		</div>
-		<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
-			<div
-				:key="`bucket${bucket.id}`"
-				class="bucket"
-				:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
-				v-for="bucket in buckets"
+		<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"
 			>
-				<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
-					<span
-						v-if="bucket.isDoneBucket"
-						class="icon is-small has-text-success mr-2"
-						v-tooltip="$t('list.kanban.doneBucketHint')"
+				<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, k) in buckets"
 					>
-						<icon icon="check-double"/>
-					</span>
-					<h2
-						:ref="`bucket${bucket.id}title`"
-						@focusout="() => saveBucketTitle(bucket.id)"
-						@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
-						class="title input"
-						:contenteditable="canWrite && !collapsedBuckets[bucket.id]"
-						spellcheck="false">{{ bucket.title }}</h2>
-					<span
-						:class="{'is-max': bucket.tasks.length >= bucket.limit}"
-						class="limit"
-						v-if="bucket.limit > 0">
-						{{ bucket.tasks.length }}/{{ bucket.limit }}
-					</span>
-					<dropdown
-						class="is-right options"
-						v-if="canWrite && !collapsedBuckets[bucket.id]"
-						trigger-icon="ellipsis-v"
-						@close="() => showSetLimitInput = false"
-					>
-						<a
-							@click.stop="showSetLimitInput = true"
-							class="dropdown-item"
-						>
-							<div class="field has-addons" v-if="showSetLimitInput">
-								<div class="control">
-									<input
-										@change="() => setBucketLimit(bucket)"
-										@keyup.enter="() => setBucketLimit(bucket)"
-										@keyup.esc="() => showSetLimitInput = false"
-										class="input"
-										type="number"
-										min="0"
-										v-focus.always
-										v-model="bucket.limit"
-									/>
-								</div>
-								<div class="control">
-									<x-button
-										:disabled="bucket.limit < 0"
-										:icon="['far', 'save']"
-										:shadow="false"
-									/>
-								</div>
-							</div>
-							<template v-else>
-								{{
-									$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
-								}}
-							</template>
-						</a>
-						<a
-							@click.stop="toggleDoneBucket(bucket)"
-							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>
-							{{ $t('list.kanban.doneBucket') }}
-						</a>
-						<a
-							class="dropdown-item"
-							@click.stop="() => collapseBucket(bucket)"
-						>
-							{{ $t('list.kanban.collapse') }}
-						</a>
-						<a
-							:class="{'is-disabled': buckets.length <= 1}"
-							@click.stop="() => deleteBucketModal(bucket.id)"
-							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>
-							{{ $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"
-					>
-						<!-- Make the component either a div or a draggable component based on the user rights -->
-						<component
-							:is="canWrite ? 'Draggable' : 'div'"
-							: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"
+						<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
+							<span
+								v-if="bucket.isDoneBucket"
+								class="icon is-small has-text-success mr-2"
+								v-tooltip="$t('list.kanban.doneBucketHint')"
 							>
-							<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>
+								<icon icon="check-double"/>
 							</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"
-										/>
+							<h2
+								:ref="`bucket${bucket.id}title`"
+								@focusout="() => saveBucketTitle(bucket.id)"
+								@keydown.enter.prevent.stop="() => saveBucketTitle(bucket.id)"
+								@click="focusBucketTitle"
+								class="title input"
+								:contenteditable="bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]"
+								spellcheck="false">{{ bucket.title }}</h2>
+							<span
+								:class="{'is-max': bucket.tasks.length >= bucket.limit}"
+								class="limit"
+								v-if="bucket.limit > 0">
+								{{ bucket.tasks.length }}/{{ bucket.limit }}
+							</span>
+							<dropdown
+								class="is-right options"
+								v-if="canWrite && !collapsedBuckets[bucket.id]"
+								trigger-icon="ellipsis-v"
+								@close="() => showSetLimitInput = false"
+							>
+								<a
+									@click.stop="showSetLimitInput = true"
+									class="dropdown-item"
+								>
+									<div class="field has-addons" v-if="showSetLimitInput">
+										<div class="control">
+											<input
+												@change="() => setBucketLimit(bucket)"
+												@keyup.enter="() => setBucketLimit(bucket)"
+												@keyup.esc="() => showSetLimitInput = false"
+												class="input"
+												type="number"
+												min="0"
+												v-focus.always
+												v-model="bucket.limit"
+											/>
+										</div>
+										<div class="control">
+											<x-button
+												:disabled="bucket.limit < 0"
+												:icon="['far', 'save']"
+												:shadow="false"
+											/>
+										</div>
 									</div>
-									<span class="icon" v-if="task.attachments.length > 0">
-										<icon icon="paperclip"/>	
+									<template v-else>
+										{{
+											$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
+										}}
+									</template>
+								</a>
+								<a
+									@click.stop="toggleDoneBucket(bucket)"
+									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 v-if="task.description" class="icon">
-										<icon icon="align-left"/>
+									{{ $t('list.kanban.doneBucket') }}
+								</a>
+								<a
+									class="dropdown-item"
+									@click.stop="() => collapseBucket(bucket)"
+								>
+									{{ $t('list.kanban.collapse') }}
+								</a>
+								<a
+									:class="{'is-disabled': buckets.length <= 1}"
+									@click.stop="() => deleteBucketModal(bucket.id)"
+									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>
-								</div>
-							</div>
-						</component>
-					</component>
-				</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}">
-							<input
-								class="input"
-								:disabled="taskService.loading || loading"
-								@focusout="toggleShowNewTaskInput(bucket.id)"
-								@keyup.enter="addTaskToBucket(bucket.id)"
-								@keyup.esc="toggleShowNewTaskInput(bucket.id)"
-								:placeholder="$t('list.kanban.addTaskPlaceholder')"
-								type="text"
-								v-focus.always
-								v-model="newTaskText"
-							/>
+									{{ $t('misc.delete') }}
+								</a>
+							</dropdown>
+						</div>
+						<div :ref="`tasks-container${bucket.id}`" class="tasks">
+							<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"
+							>
+								<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"
+										:task="task"
+									/>
+								</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': loading}">
+									<input
+										class="input"
+										:disabled="loading"
+										@focusout="toggleShowNewTaskInput(bucket.id)"
+										@keyup.enter="addTaskToBucket(bucket.id)"
+										@keyup.esc="toggleShowNewTaskInput(bucket.id)"
+										:placeholder="$t('list.kanban.addTaskPlaceholder')"
+										type="text"
+										v-focus.always
+										v-model="newTaskText"
+									/>
+								</div>
+								<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
+									{{ $t('list.list.addTitleRequired') }}
+								</p>
+							</div>
+							<x-button
+								@click="toggleShowNewTaskInput(bucket.id)"
+								class="is-transparent is-fullwidth has-text-centered"
+								:shadow="false"
+								v-if="!showNewTaskInput[bucket.id]"
+								icon="plus"
+								type="secondary"
+							>
+								{{
+									bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
+								}}
+							</x-button>
 						</div>
-						<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
-							{{ $t('list.list.addTitleRequired') }}
-						</p>
 					</div>
-					<x-button
-						@click="toggleShowNewTaskInput(bucket.id)"
-						class="is-transparent is-fullwidth has-text-centered"
-						:shadow="false"
-						v-if="!showNewTaskInput[bucket.id]"
-						icon="plus"
-						type="secondary"
-					>
-						{{ 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,
-		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,
-	}),
+	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,76 +361,23 @@ 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) {
+			task.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
+			task.bucketId = newBucket.id
 
-				// 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
-
-				this.$store.dispatch('tasks/update', task)
-					.catch(e => {
-						this.error(e)
-					})
-					.finally(() => {
-						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)
 				})
@@ -490,13 +386,6 @@ export default {
 					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
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 722c67041..0aed4eddf 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -21,7 +21,7 @@
 								v-model="searchTerm"
 							/>
 							<span class="icon is-left">
-								<icon icon="search" />
+								<icon icon="search"/>
 							</span>
 						</div>
 						<div class="control">
@@ -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">
@@ -81,23 +80,35 @@
 					class="tasks mt-0"
 					v-if="tasks && tasks.length > 0"
 				>
-					<single-task-in-list
-						:show-list-color="false"
-						:disabled="!canWrite"
-						:key="t.id"
-						:the-task="t"
-						@taskUpdated="updateTasks"
-						task-detail-route="task.detail"
-						v-for="t in tasks"
+					<draggable
+						v-model="tasks"
+						group="tasks"
+						@start="() => drag = true"
+						@end="saveTaskPosition"
+						v-bind="dragOptions"
+						handle=".handle"
 					>
-						<div
-							@click="editTask(t.id)"
-							class="icon settings"
-							v-if="!list.isArchived && canWrite"
+						<single-task-in-list
+							:show-list-color="false"
+							:disabled="!canWrite"
+							:key="t.id"
+							:the-task="t"
+							@taskUpdated="updateTasks"
+							task-detail-route="task.detail"
+							v-for="t in tasks"
 						>
-							<icon icon="pencil-alt" />
-						</div>
-					</single-task-in-list>
+							<span class="icon handle">
+								<icon icon="grip-lines"/>
+							</span>
+							<div
+								@click="editTask(t.id)"
+								class="icon settings"
+								v-if="!list.isArchived && canWrite"
+							>
+								<icon icon="pencil-alt"/>
+							</div>
+						</single-task-in-list>
+					</draggable>
 				</div>
 				<card
 					v-if="isTaskEdit"
@@ -150,7 +161,7 @@
 
 		<!-- This router view is used to show the task popup while keeping the kanban board itself -->
 		<transition name="modal">
-			<router-view />
+			<router-view/>
 		</transition>
 	</div>
 </template>
@@ -163,14 +174,17 @@ import EditTask from '../../../components/tasks/edit-task'
 import AddTask from '../../../components/tasks/add-task'
 import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
 import taskList from '../../../components/tasks/mixins/taskList'
-import { saveListView } from '@/helpers/saveListView'
+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 {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({
-		canWrite: state => state.currentList.maxRight > Rights.READ,
-		list: state => state.currentList,
-	}),
+	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) {
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index f539aaacb..6ef4cc58c 100644
--- 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,
 	}),
diff --git a/yarn.lock b/yarn.lock
index e790f84e6..97207e490 100644
--- 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"