MisskeyDeck: ドラッグでカラムを入れ替えられるように

1 files changed, 64 insertions, 3 deletions

diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 3e26d8630f..7c97e45062 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -1,6 +1,15 @@
 <template>
-<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked }">
-	<header :class="{ indicate: count > 0 }" @click="toggleActive">
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging }">
+	<header :class="{ indicate: count > 0 }"
+			draggable="true"
+			@click="toggleActive"
+			@dragstart="onDragstart"
+			@dragend="onDragend"
+			@dragover.prevent.stop="onDragover"
+			@dragenter.prevent="onDragenter"
+			@dragleave="onDragleave"
+			@drop.prevent.stop="onDrop"
+		>
 		<slot name="header"></slot>
 		<span class="count" v-if="count > 0">({{ count }})</span>
 		<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
@@ -53,7 +62,9 @@ export default Vue.extend({
 	data() {
 		return {
 			count: 0,
-			active: true
+			active: true,
+			dragging: false,
+			draghover: false
 		};
 	},
 
@@ -162,6 +173,49 @@ export default Vue.extend({
 				compact: false,
 				items
 			});
+		},
+
+		onDragstart(e) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('mk-deck-column', this.column.id);
+			this.dragging = true;
+		},
+
+		onDragend(e) {
+			this.dragging = false;
+		},
+
+		onDragover(e) {
+			// 自分自身がドラッグされている場合
+			if (this.dragging) {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+
+			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+		},
+
+		onDragenter() {
+			if (!this.dragging) this.draghover = true;
+		},
+
+		onDragleave() {
+			this.draghover = false;
+		},
+
+		onDrop(e) {
+			this.draghover = false;
+
+			const id = e.dataTransfer.getData('mk-deck-column');
+			if (id != null && id != '') {
+				this.$store.dispatch('settings/swapDeckColumn', {
+					a: this.column.id,
+					b: id
+				});
+			}
 		}
 	}
 });
@@ -181,6 +235,10 @@ root(isDark)
 	box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
 
+	&.draghover
+	&.dragging
+		box-shadow 0 0 0 2px rgba($theme-color, 0.7)
+
 	&:not(.active)
 		flex-basis $header-height
 		min-height $header-height
@@ -213,6 +271,9 @@ root(isDark)
 		&, *
 			user-select none
 
+		*:not(button)
+			pointer-events none
+
 		&.indicate
 			box-shadow 0 3px 0 0 $theme-color