diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index de6479489f..15e7b80a01 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -1,5 +1,16 @@
 <template>
-	<router-link class="app-content-list-item" :class="{seen: data.flags.seen, draft, selected: selected}" :to="link">
+	<router-link
+		v-draggable-envelope="{
+			accountId: data.accountId ? data.accountId : mailbox.accountId,
+			mailboxId: data.mailboxId,
+			envelopeId: data.databaseId,
+			draggableLabel: `${data.subject} (${data.from[0].label})`,
+			selectedEnvelopes,
+		}"
+		class="app-content-list-item"
+		:class="{seen: data.flags.seen, draft, selected: selected}"
+		:to="link"
+		:data-envelope-id="data.databaseId">
 		<div
 			v-if="mailbox.isUnified"
 			class="mail-message-account-color"
@@ -133,6 +144,7 @@ import { matchError } from '../errors/match'
 import NoTrashMailboxConfiguredError
 	from '../errors/NoTrashMailboxConfiguredError'
 import logger from '../logger'
+import { DraggableEnvelopeDirective } from '../directives/drag-and-drop/draggable-envelope'
 
 export default {
 	name: 'Envelope',
@@ -144,6 +156,9 @@ export default {
 		Moment,
 		MoveModal,
 	},
+	directives: {
+		draggableEnvelope: DraggableEnvelopeDirective,
+	},
 	props: {
 		data: {
 			type: Object,
@@ -161,6 +176,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		selectedEnvelopes: {
+			type: Array,
+			required: false,
+			default: () => [],
+		},
 	},
 	data() {
 		return {
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index 83ea431bdd..55dafc2680 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -98,6 +98,7 @@
 				:mailbox="mailbox"
 				:selected="selection.includes(env.databaseId)"
 				:select-mode="selectMode"
+				:selected-envelopes="selectedEnvelopes"
 				@delete="$emit('delete', env.databaseId)"
 				@update:selected="onEnvelopeSelectToggle(env, index, ...$event)"
 				@select-multiple="onEnvelopeSelectMultiple(env, index)" />
@@ -125,6 +126,7 @@ import { matchError } from '../errors/match'
 import NoTrashMailboxConfiguredError
 	from '../errors/NoTrashMailboxConfiguredError'
 import { differenceWith } from 'ramda'
+import dragEventBus from '../directives/drag-and-drop/util/dragEventBus'
 
 export default {
 	name: 'EnvelopeList',
@@ -202,7 +204,20 @@ export default {
 				})
 		},
 	},
+	mounted() {
+		dragEventBus.$on('envelopesDropped', this.unselectAll)
+	},
+	beforeDestroy() {
+		dragEventBus.$off('envelopesDropped', this.unselectAll)
+	},
 	methods: {
+		isEnvelopeSelected(idx) {
+			if (this.selection.length === 0) {
+				return false
+			}
+
+			return this.selection.includes(idx)
+		},
 		markSelectedSeenOrUnseen() {
 			const seen = !this.areAllSelectedRead
 			this.selectedEnvelopes.forEach((envelope) => {
diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue
index 1efc8faa7f..cbd9341b39 100644
--- a/src/components/NavigationMailbox.vue
+++ b/src/components/NavigationMailbox.vue
@@ -24,6 +24,11 @@
 		v-if="visible"
 		:id="genId(mailbox)"
 		:key="genId(mailbox)"
+		v-droppable-mailbox="{
+			mailboxId: mailbox.databaseId,
+			accountId: mailbox.accountId,
+			isValidDropTarget,
+		}"
 		:allow-collapse="true"
 		:menu-open.sync="menuOpen"
 		:force-menu="true"
@@ -142,6 +147,8 @@ import logger from '../logger'
 import { translatePlural as n } from '@nextcloud/l10n'
 import { translate as translateMailboxName } from '../i18n/MailboxTranslator'
 import { showInfo } from '@nextcloud/dialogs'
+import { DroppableMailboxDirective as droppableMailbox } from '../directives/drag-and-drop/droppable-mailbox'
+import dragEventBus from '../directives/drag-and-drop/util/dragEventBus'
 
 export default {
 	name: 'NavigationMailbox',
@@ -154,6 +161,9 @@ export default {
 		ActionInput,
 		MoveMailboxModal,
 	},
+	directives: {
+		droppableMailbox,
+	},
 	props: {
 		account: {
 			type: Object,
@@ -189,7 +199,6 @@ export default {
 			renameInput: false,
 			mailboxName: this.mailbox.displayName,
 			showMoveModal: false,
-
 		}
 	},
 	computed: {
@@ -262,6 +271,34 @@ export default {
 		isSubscribed() {
 			return this.mailbox.attributes && this.mailbox.attributes.includes('\\subscribed')
 		},
+		isDroppableSpecialMailbox() {
+			if (this.filter === 'starred') {
+				return false
+			}
+			return ![
+				this.account.draftsMailboxId,
+				this.account.sentMailboxId,
+			].includes(this.mailbox.databaseId)
+		},
+		isActive() {
+			return this.$route.params.mailboxId === this.mailbox.databaseId
+		},
+		isValidDropTarget() {
+			if (this.isActive) {
+				return false
+			}
+			return this.isDroppableSpecialMailbox || (!this.mailbox.specialRole && !this.account.isUnified)
+		},
+	},
+	mounted() {
+		dragEventBus.$on('dragStart', this.onDragStart)
+		dragEventBus.$on('dragEnd', this.onDragEnd)
+		dragEventBus.$on('envelopesMoved', this.onEnvelopesMoved)
+	},
+	beforeDestroy() {
+		dragEventBus.$off('dragStart', this.onDragStart)
+		dragEventBus.$off('dragEnd', this.onDragEnd)
+		dragEventBus.$off('envelopesMoved', this.onEnvelopesMoved)
 	},
 	methods: {
 		/**
@@ -444,6 +481,38 @@ export default {
 		onCloseMoveModal() {
 			this.showMoveModal = false
 		},
+		onDragStart({ accountId }) {
+			if (accountId !== this.mailbox.accountId) {
+				return
+			}
+			this.$store.commit('expandAccount', accountId)
+			this.showSubMailboxes = true
+		},
+		onDragEnd({ accountId }) {
+			if (accountId !== this.mailbox.accountId) {
+				return
+			}
+			this.showSubMailboxes = false
+		},
+		onEnvelopesMoved({ mailboxId, movedEnvelopes }) {
+			if (this.mailbox.databaseId !== mailboxId) {
+				return
+			}
+			const openedMessageHasBeenMoved = movedEnvelopes.find((movedEnvelope) => {
+				return movedEnvelope.envelopeId === this.$route.params.threadId
+			})
+			// navigate to the mailbox root
+			// if the currently displayed message has been moved
+			if (this.$route.name === 'message' && openedMessageHasBeenMoved) {
+				this.$router.push({
+					name: 'mailbox',
+					params: {
+						mailboxId: this.$route.params.mailboxId,
+						filter: this.$route.params?.filter,
+					},
+				})
+			}
+		},
 	},
 }
 </script>
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index 71d14dc2fd..1d399859d9 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -63,7 +63,6 @@ export default {
 		return {
 			loading: false,
 			bus: new Vue(),
-			signature: '',
 		}
 	},
 	created() {
diff --git a/src/directives/drag-and-drop/draggable-envelope/draggable-envelope.js b/src/directives/drag-and-drop/draggable-envelope/draggable-envelope.js
new file mode 100644
index 0000000000..6d06947e90
--- /dev/null
+++ b/src/directives/drag-and-drop/draggable-envelope/draggable-envelope.js
@@ -0,0 +1,104 @@
+import dragEventBus from '../util/dragEventBus'
+import defer from 'lodash/defer'
+
+export class DraggableEnvelope {
+
+	constructor(el, componentInstance, options) {
+		this.el = el
+		this.options = options
+		this.registerListeners.bind(this)(el)
+		this.setInitialAttributes()
+	}
+
+	setInitialAttributes() {
+		this.el.setAttribute('draggable', 'true')
+		this.el.classList.add('draggable-envelope')
+	}
+
+	update(el, instance) {
+		this.options = instance.options
+	}
+
+	registerListeners(el) {
+		el.addEventListener('dragstart', this.onDragStart.bind(this))
+		el.addEventListener('dragend', this.onDragEnd.bind(this))
+	}
+
+	removeListeners(el) {
+		el.removeEventListener('dragstart', this.onDragStart)
+		el.removeEventListener('dragend', this.onDragEnd)
+	}
+
+	onDragStart(event) {
+		const { accountId, mailboxId, selectedEnvelopes } = this.options
+
+		event.dataTransfer.clearData()
+		event.dataTransfer.effectAllowed = 'move'
+
+		const envelopes = []
+		if (selectedEnvelopes.length) {
+			// handle dragged selection mode items
+			selectedEnvelopes.forEach((envelope, index) => {
+				envelopes.push({
+					accountId,
+					mailboxId,
+					envelopeId: envelope.databaseId,
+					draggableLabel: `${envelope.subject} (${envelope.from[0].label})`,
+				})
+			})
+		} else {
+			// handle single dragged item
+			const { envelopeId, draggableLabel } = this.options
+			envelopes.push({ accountId, mailboxId, envelopeId, draggableLabel })
+		}
+
+		event.dataTransfer.setData('text/plain', JSON.stringify(envelopes))
+		this.attachGhost({ event, envelopes })
+
+		dragEventBus.$emit('dragStart', {
+			accountId,
+			mailboxId,
+			itemCount: envelopes.length,
+		})
+	}
+
+	onDragEnd(event) {
+		dragEventBus.$emit('dragEnd', { accountId: this.options.accountId })
+	}
+
+	attachGhost({ event, envelopes }) {
+		const baseClass = 'draggable-envelope-ghost'
+		const dragNode = document.createElement('div')
+		dragNode.classList.add(baseClass)
+
+		const counterNode = document.createElement('span')
+		counterNode.classList.add(`${baseClass}--counter`)
+		const textCountNode = document.createTextNode(envelopes.length)
+		counterNode.appendChild(textCountNode)
+		dragNode.appendChild(counterNode)
+
+		const labelWrapperNode = document.createElement('div')
+		labelWrapperNode.classList.add(`${baseClass}--label-wrapper`)
+
+		envelopes.forEach(envelope => {
+			const labelNode = document.createElement('div')
+			labelNode.classList.add(`${baseClass}--label-wrapper--label`)
+			const textLabelNode = document.createTextNode(envelope.draggableLabel)
+			labelNode.appendChild(textLabelNode)
+			labelWrapperNode.appendChild(labelNode)
+		})
+
+		dragNode.appendChild(labelWrapperNode)
+		document.body.appendChild(dragNode)
+
+		event.dataTransfer.setDragImage(dragNode, 0, 15)
+
+		// the item can be removed immediately, because the
+		// browser will take a "screenshot" of the dragImage
+		// upon initialization to be used while dragging
+		defer(() => {
+			document.body.removeChild(dragNode)
+		})
+	}
+
+}
diff --git a/src/directives/drag-and-drop/draggable-envelope/index.js b/src/directives/drag-and-drop/draggable-envelope/index.js
new file mode 100644
index 0000000000..c51373251c
--- /dev/null
+++ b/src/directives/drag-and-drop/draggable-envelope/index.js
@@ -0,0 +1,24 @@
+import { DraggableEnvelope } from './draggable-envelope'
+
+let instances = []
+
+export const DraggableEnvelopeDirective = {
+	bind(el, binding, vnode) {
+		const instance = new DraggableEnvelope(el, vnode.context, binding.value)
+		instances.push(instance)
+	},
+	componentUpdated(el, binding) {
+		const options = binding.value
+		setTimeout(() => {
+			instances.forEach(instance => {
+				instance.options.selectedEnvelopes = options.selectedEnvelopes
+				instance.update(el, instance)
+			})
+		})
+	},
+	unbind(el) {
+		instances = instances.filter((instance) => instance.el !== el)
+	},
+}
+
+export default DraggableEnvelope
diff --git a/src/directives/drag-and-drop/droppable-mailbox/droppable-mailbox.js b/src/directives/drag-and-drop/droppable-mailbox/droppable-mailbox.js
new file mode 100644
index 0000000000..059a990d8d
--- /dev/null
+++ b/src/directives/drag-and-drop/droppable-mailbox/droppable-mailbox.js
@@ -0,0 +1,132 @@
+import store from '../../../store'
+import logger from '../../../logger'
+import dragEventBus from '../util/dragEventBus'
+
+export class DroppableMailbox {
+
+	constructor(el, componentInstance, options) {
+		this.el = el
+		this.options = options
+		this.registerListeners.bind(this)(el)
+		this.setInitialAttributes()
+	}
+
+	setInitialAttributes() {
+		this.draggableInfo = {}
+		this.setStatus('enabled')
+	}
+
+	update(el, instance) {
+		this.setInitialAttributes()
+		this.options = instance.options
+	}
+
+	registerListeners(el) {
+		dragEventBus.$on('dragStart', this.onDragStart.bind(this))
+		dragEventBus.$on('dragEnd', this.onDragEnd.bind(this))
+
+		// event listeners need to be attached to the first child element
+		// (a button or an anchor tag) instead of the root el, because there
+		// can be sub-mailboxes within the root element of the directive
+		el.firstChild.addEventListener('dragover', this.onDragOver.bind(this))
+		el.firstChild.addEventListener('dragleave', this.onDragLeave.bind(this))
+		el.firstChild.addEventListener('drop', this.onDrop.bind(this))
+	}
+
+	removeListeners(el) {
+		dragEventBus.$off('dragStart', this.onDragStart)
+		dragEventBus.$off('dragEnd', this.onDragEnd)
+
+		el.firstChild.removeEventListener('dragover', this.onDragOver)
+		el.firstChild.removeEventListener('dragleave', this.onDragLeave)
+		el.firstChild.removeEventListener('drop', this.onDrop)
+	}
+
+	setStatus(status) {
+		this.el.setAttribute('droppable-mailbox', status)
+	}
+
+	onDragStart(draggableInfo) {
+		this.draggableInfo = draggableInfo
+
+		if (!this.canBeDropped()) {
+			this.setStatus('disabled')
+		}
+	}
+
+	canBeDropped() {
+		return this.isSameAccount() && this.options.isValidDropTarget
+	}
+
+	isSameAccount() {
+		return this.draggableInfo.accountId === this.options.accountId
+	}
+
+	onDragEnd() {
+		this.setInitialAttributes()
+	}
+
+	onDragOver(event) {
+		event.preventDefault()
+
+		// Prevent dropping into current folder
+		if (this.draggableInfo.mailboxId === this.options.mailboxId) {
+			return
+		}
+
+		if (this.options.isValidDropTarget) {
+			this.setStatus('dragover')
+		}
+
+		event.dataTransfer.dropEffect = 'move'
+	}
+
+	onDragLeave(event) {
+		event.preventDefault()
+		this.setStatus('enabled')
+	}
+
+	async onDrop(event) {
+		event.preventDefault()
+
+		// Prevent dropping into current folder
+		if (this.draggableInfo.mailboxId === this.options.mailboxId) {
+			return
+		}
+
+		this.setInitialAttributes()
+		const envelopesBeingDragged = JSON.parse(event.dataTransfer.getData('text'))
+		dragEventBus.$emit('envelopesDropped', { envelopes: envelopesBeingDragged })
+
+		try {
+			const processedEnvelopes = envelopesBeingDragged.map(async envelope => {
+				const processed = await this.processDroppedItem(parseInt(envelope.envelopeId))
+				return processed
+			})
+			await Promise.all(processedEnvelopes)
+		} catch (error) {
+			logger.error('could not process dropped messages', error)
+		} finally {
+			dragEventBus.$emit('envelopesMoved', {
+				mailboxId: this.options.mailboxId,
+				movedEnvelopes: envelopesBeingDragged,
+			})
+		}
+	}
+
+	async processDroppedItem(envelopeId) {
+		const item = document.querySelector(`[data-envelope-id="${envelopeId}"]`)
+		item.setAttribute('draggable-envelope', 'pending')
+
+		try {
+			await store.dispatch('moveMessage', {
+				id: envelopeId,
+				destMailboxId: this.options.mailboxId,
+			})
+		} catch (error) {
+			item.removeAttribute('draggable-envelope')
+			logger.error('could not move messages', error)
+		}
+	}
+
+}
diff --git a/src/directives/drag-and-drop/droppable-mailbox/index.js b/src/directives/drag-and-drop/droppable-mailbox/index.js
new file mode 100644
index 0000000000..38fdea6d97
--- /dev/null
+++ b/src/directives/drag-and-drop/droppable-mailbox/index.js
@@ -0,0 +1,15 @@
+import { DroppableMailbox } from './droppable-mailbox'
+
+let instance
+
+export const DroppableMailboxDirective = {
+	bind(el, binding, vnode) {
+		instance = new DroppableMailbox(el, vnode.context, binding.value)
+	},
+	componentUpdated(el, binding) {
+		instance.options = binding.value
+		instance.update(el, instance)
+	},
+}
+
+export default DroppableMailbox
diff --git a/src/directives/drag-and-drop/styles/drag-and-drop.scss b/src/directives/drag-and-drop/styles/drag-and-drop.scss
new file mode 100644
index 0000000000..441cbc40cd
--- /dev/null
+++ b/src/directives/drag-and-drop/styles/drag-and-drop.scss
@@ -0,0 +1,2 @@
+@import 'draggable-envelope';
+@import 'droppable-mailbox';
diff --git a/src/directives/drag-and-drop/styles/draggable-envelope.scss b/src/directives/drag-and-drop/styles/draggable-envelope.scss
new file mode 100644
index 0000000000..577fd8a0fb
--- /dev/null
+++ b/src/directives/drag-and-drop/styles/draggable-envelope.scss
@@ -0,0 +1,49 @@
+[draggable-envelope="pending"] {
+	opacity: 0.6;
+	pointer-events: none;
+	cursor: default;
+}
+.draggable-envelope-ghost {
+	height: auto;
+	width: 300px;
+
+	&--counter {
+		position: absolute;
+		left: -40px;
+		background-color: var(--color-primary-element);
+		color: #fff;
+		font-weight: bold;
+		text-align: center;
+		display: inline-block;
+		margin-right: 10px;
+		border-top-left-radius: 20px;
+		border-bottom-left-radius: 20px;
+		width: 10px;
+		padding: 8px 15px;
+	}
+
+	&--label-wrapper {
+		&--label {
+			padding: 8px 15px;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			width: 100%;
+			text-align: left;
+			margin-bottom: 1px;
+			background-color: #fff;
+			border-left: 2px solid var(--color-primary-element);
+
+			&:first-child {
+				border-top-right-radius: 20px;
+			}
+			&:last-child {
+				border-bottom-right-radius: 20px;
+				border-bottom-left-radius: 20px;
+			}
+			&:only-child {
+				border-bottom-left-radius: 0;
+			}
+		}
+	}
+}
diff --git a/src/directives/drag-and-drop/styles/droppable-mailbox.scss b/src/directives/drag-and-drop/styles/droppable-mailbox.scss
new file mode 100644
index 0000000000..aa76f734da
--- /dev/null
+++ b/src/directives/drag-and-drop/styles/droppable-mailbox.scss
@@ -0,0 +1,71 @@
+[droppable-mailbox] {
+	a.app-navigation-entry-link {
+		position: relative;
+
+		&:before,
+		&:after {
+			transition: .1s border-color ease-in-out;
+		}
+	}
+
+	> a {
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 2px;
+			bottom: 0;
+			right: 0;
+			transition: .1s opacity ease-in-out;
+			border: 2px solid transparent;
+			pointer-events: none;
+			border-radius: 20px;
+		}
+
+		&:after {
+			content: '';
+			position: absolute;
+			width: 0;
+			height: 0;
+			border-top: 5px solid transparent;
+			border-left: 5px solid transparent;
+			border-bottom: 5px solid transparent;
+			left: 4px;
+			top: 50%;
+			margin-top: -5px;
+		}
+	}
+}
+[droppable-mailbox="disabled"] {
+	pointer-events: none;
+	opacity: .3;
+}
+[droppable-mailbox="dragover"] {
+	> a {
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 2px;
+			bottom: 0;
+			right: 0;
+			transition: .1s opacity ease-in-out;
+			border: 2px solid var(--color-primary-element);
+			pointer-events: none;
+			border-radius: 20px;
+		}
+
+		&:after {
+			content: '';
+			position: absolute;
+			width: 0;
+			height: 0;
+			border-top: 5px solid transparent;
+			border-left: 5px solid var(--color-primary-element);
+			border-bottom: 5px solid transparent;
+			left: 4px;
+			top: 50%;
+			margin-top: -5px;
+		}
+	}
+}
diff --git a/src/directives/drag-and-drop/util/dragEventBus.js b/src/directives/drag-and-drop/util/dragEventBus.js
new file mode 100644
index 0000000000..1fd15cf477
--- /dev/null
+++ b/src/directives/drag-and-drop/util/dragEventBus.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+const dragEventBus = new Vue()
+export default dragEventBus
diff --git a/src/main.js b/src/main.js
index 018906c260..1b26ac3228 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,6 +25,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import { sync } from 'vuex-router-sync'
 import { generateFilePath } from '@nextcloud/router'
 import '@nextcloud/dialogs/styles/toast.scss'
+import './directives/drag-and-drop/styles/drag-and-drop.scss'
 import VueShortKey from 'vue-shortkey'
 import VTooltip from 'v-tooltip'