misskey-dev · fruitriin · Jun 3, 2026 · Jun 3, 2026 · Jun 3, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - Fix: 一部のUI要素の色が正しく表示されない問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/1243)
 - Fix: 「D」キーでダークモードを切り替える際にsyncDeviceDarkModeのチェックがバイパスされる問題を修正
+- Enhance(frontend): MkDraggable をタッチ操作対応
 
 ### Server
 - Enhance: リモートノートクリーニングジョブのスキップ処理のパフォーマンス改善

diff --git a/packages/frontend/src/components/MkDraggable.vue b/packages/frontend/src/components/MkDraggable.vue
diff --git a/packages/frontend/src/drag-and-drop.ts b/packages/frontend/src/drag-and-drop.ts
@@ -9,7 +9,6 @@ type DragDataMap = {
 	driveFiles: Misskey.entities.DriveFile[];
 	driveFolders: Misskey.entities.DriveFolder[];
 	deckColumn: string;
-	MkDraggable: { item: { id: string }; instanceId: string; group: string; };
 };
 
 // NOTE: dataTransfer の format は大文字小文字区別されないっぽいので toLowerCase が必要

diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.vue b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.header">
 		<MkSelect v-model="typeModelForMkSelect" :items="typeDef" :class="$style.typeSelect">
 		</MkSelect>
-		<button v-if="draggable" class="_button" :class="$style.dragHandle" :draggable="true" @dragstart.stop="dragStartCallback">
+		<button v-if="draggable" class="_button" :class="$style.dragHandle" @pointerdown.stop="pointerStartCallback">
 			<i class="ti ti-menu-2"></i>
 		</button>
 		<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf">
@@ -25,12 +25,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			manualDragStart
 			group="roleFormula"
 		>
-			<template #default="{ item, dragStart }">
+			<template #default="{ item, pointerStart }">
 				<div :class="$style.item">
 					<!-- divが無いとエラーになる -->
 					<RolesEditorFormula
 						:modelValue="item"
-						:dragStartCallback="dragStart"
+						:pointerStartCallback="pointerStart"
 						draggable
 						@update:modelValue="updated => childValuesItemUpdated(updated)"
 						@remove="removeChildItem(item.id)"
@@ -78,7 +78,7 @@ const emit = defineEmits<{
 const props = defineProps<{
 	modelValue: Misskey.entities.Role['condFormula'];
 	draggable?: boolean;
-	dragStartCallback?: (ev: DragEvent) => void;
+	pointerStartCallback?: (ev: PointerEvent) => void;
 }>();
 
 const v = ref(deepClone(props.modelValue));
@@ -180,6 +180,9 @@ function removeSelf() {
 .dragHandle {
 	cursor: move;
 	margin-left: 10px;
+	// MkDraggable のハンドル: ブラウザのスクロール/ズームジェスチャを抑止して、pointerdown を
+	// ドラッグ開始に確実に転送する (touch-action: manipulation を持つ `_button` を上書き)。
+	touch-action: none;
 }
 
 .remove {

diff --git a/packages/frontend/src/pages/admin/server-rules.vue b/packages/frontend/src/pages/admin/server-rules.vue
@@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				withGaps
 				manualDragStart
 			>
-				<template #default="{ item, index, dragStart }">
+				<template #default="{ item, index, pointerStart }">
 					<div :class="$style.item">
 						<div :class="$style.itemHeader">
 							<div :class="$style.itemNumber">{{ index + 1 }}</div>
-							<span :class="$style.itemHandle" :draggable="true" @dragstart.stop="dragStart"><i class="ti ti-menu"></i></span>
+							<span :class="$style.itemHandle" @pointerdown.stop="pointerStart"><i class="ti ti-menu"></i></span>
 							<button class="_button" :class="$style.itemRemove" @click="remove(item.id)"><i class="ti ti-x"></i></button>
 						</div>
 						<MkInput :modelValue="item.text" @update:modelValue="serverRules[index].text = $event"/>
@@ -85,6 +85,8 @@ function remove(id: string): void {
 	align-items: center;
 	justify-content: center;
 	cursor: move;
+	// MkDraggable のハンドル: ブラウザのジェスチャを抑止
+	touch-action: none;
 }
 
 .itemNumber {

diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
@@ -47,9 +47,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						manualDragStart
 						@update:modelValue="v => pinnedNoteIds = v.map(x => x.id)"
 					>
-						<template #default="{ item, dragStart }">
+						<template #default="{ item, pointerStart }">
 							<div :class="$style.pinnedNote">
-								<button class="_button" :class="$style.pinnedNoteHandle" tabindex="-1" :draggable="true" @dragstart.stop="dragStart"><i class="ti ti-menu"></i></button>
+								<button class="_button" :class="$style.pinnedNoteHandle" tabindex="-1" @pointerdown.stop="pointerStart"><i class="ti ti-menu"></i></button>
 								{{ item.id }}
 								<button class="_button" :class="$style.pinnedNoteRemove" @click="removePinnedNote(item.id)"><i class="ti ti-x"></i></button>
 							</div>
@@ -242,5 +242,7 @@ definePage(() => ({
 	height: 32px;
 	margin: 0 8px;
 	opacity: 0.5;
+	// MkDraggable のハンドル: ブラウザのジェスチャを抑止
+	touch-action: none;
 }
 </style>
diff --git a/packages/frontend/src/pages/page-editor/common.ts b/packages/frontend/src/pages/page-editor/common.ts
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { i18n } from '@/i18n.js';
 import type { MkSelectItem } from '@/components/MkSelect.vue';
+import { i18n } from '@/i18n.js';
 
 export function getPageBlockList() {
 	return [

diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
+<XContainer :draggable="true" :pointerStartCallback="pointerStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-photo"></i> {{ i18n.ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
@@ -30,7 +30,7 @@ import { i18n } from '@/i18n.js';
 import { chooseDriveFile } from '@/utility/drive.js';
 
 const props = defineProps<{
-	dragStartCallback?: (ev: DragEvent) => void;
+	pointerStartCallback?: (ev: PointerEvent) => void;
 	modelValue: Misskey.entities.PageBlock & { type: 'image' };
 }>();
 

diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
+<XContainer :draggable="true" :pointerStartCallback="pointerStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ i18n.ts._pages.blocks.note }}</template>
 
 	<section style="padding: 16px;" class="_gaps_s">
@@ -22,7 +22,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
 import { watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import XContainer from '../page-editor.container.vue';
@@ -34,7 +33,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
-	dragStartCallback?: (ev: DragEvent) => void;
+	pointerStartCallback?: (ev: PointerEvent) => void;
 	modelValue: Misskey.entities.PageBlock & { type: 'note' };
 }>();
 

diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
+<XContainer :draggable="true" :pointerStartCallback="pointerStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
@@ -35,7 +35,7 @@ import { getPageBlockList } from '@/pages/page-editor/common.js';
 const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
 const props = defineProps<{
-	dragStartCallback?: (ev: DragEvent) => void;
+	pointerStartCallback?: (ev: PointerEvent) => void;
 	modelValue: Extract<Misskey.entities.PageBlock, { type: 'section'; }>,
 }>();
 

diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
+<XContainer :draggable="true" :pointerStartCallback="pointerStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section>
@@ -22,7 +22,7 @@ import { i18n } from '@/i18n.js';
 import { Autocomplete } from '@/utility/autocomplete.js';
 
 const props = defineProps<{
-	dragStartCallback?: (ev: DragEvent) => void;
+	pointerStartCallback?: (ev: PointerEvent) => void;
 	modelValue: Misskey.entities.PageBlock & { type: 'text' }
 }>();
 

diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -13,13 +13,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	group="pageBlocks"
 	@update:modelValue="v => emit('update:modelValue', v)"
 >
-	<template #default="{ item, dragStart }">
+	<template #default="{ item, pointerStart }">
 		<div>
 			<!-- divが無いとエラーになる -->
 			<component
 				:is="getComponent(item.type)"
 				:modelValue="item"
-				:dragStartCallback="dragStart"
+				:pointerStartCallback="pointerStart"
 				@update:modelValue="updateItem"
 				@remove="() => removeItem(item)"
 			/>
@@ -29,12 +29,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import type { Component } from 'vue';
 import * as Misskey from 'misskey-js';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
 import XImage from './els/page-editor.el.image.vue';
 import XNote from './els/page-editor.el.note.vue';
+import type { Component } from 'vue';
 import MkDraggable from '@/components/MkDraggable.vue';
 
 function getComponent(type: Misskey.entities.Page['content'][number]['type']): Component {

diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-if="removable" class="_button" @click="remove()">
 				<i class="ti ti-trash"></i>
 			</button>
-			<button v-if="draggable" class="drag-handle _button" tabindex="-1" :draggable="true" @dragstart.stop="dragStartCallback">
+			<button v-if="draggable" class="drag-handle _button" tabindex="-1" @pointerdown.stop="pointerStartCallback">
 				<i class="ti ti-menu-2"></i>
 			</button>
 			<button class="_button" @click="toggleContent(!showBody)">
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<{
 	expanded?: boolean;
 	removable?: boolean;
 	draggable?: boolean;
-	dragStartCallback?: (ev: DragEvent) => void;
+	pointerStartCallback?: (ev: PointerEvent) => void;
 }>(), {
 	expanded: true,
 	removable: true,
@@ -111,6 +111,8 @@ function remove() {
 
 			.drag-handle {
 				cursor: move;
+				// MkDraggable のハンドル: ブラウザのジェスチャを抑止
+				touch-action: none;
 			}
 		}
 	}

diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
@@ -14,12 +14,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					direction="vertical"
 					manualDragStart
 				>
-					<template #default="{ item, dragStart }">
+					<template #default="{ item, pointerStart }">
 						<div
 							v-if="item.type === '-' || navbarItemDef[item.type]"
 							:class="$style.item"
 						>
-							<button class="_button" :class="$style.itemHandle" tabindex="-1" :draggable="true" @dragstart.stop="dragStart"><i class="ti ti-menu"></i></button>
+							<button class="_button" :class="$style.itemHandle" tabindex="-1" @pointerdown.stop="pointerStart"><i class="ti ti-menu"></i></button>
 							<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item.type]?.icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item.type]?.title ?? i18n.ts.divider }}</span>
 							<button class="_button" :class="$style.itemRemove" @click="removeItem(item.id)"><i class="ti ti-x"></i></button>
 						</div>
@@ -162,5 +162,7 @@ definePage(() => ({
 	height: 32px;
 	margin: 0 8px;
 	opacity: 0.5;
+	// MkDraggable のハンドル: ブラウザのジェスチャを抑止
+	touch-action: none;
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
@@ -81,9 +81,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 							withGaps
 							manualDragStart
 						>
-							<template #default="{ item, dragStart }">
+							<template #default="{ item, pointerStart }">
 								<div v-panel :class="$style.fieldDragItem">
-									<button v-if="!fieldEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1" :draggable="true" @dragstart.stop="dragStart"><i class="ti ti-menu"></i></button>
+									<button v-if="!fieldEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1" @pointerdown.stop="pointerStart"><i class="ti ti-menu"></i></button>
 									<button v-if="fieldEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteField(item.id)"><i class="ti ti-x"></i></button>
 									<div :class="$style.dragItemForm">
 										<FormSplit :minWidth="200">
@@ -426,6 +426,8 @@ definePage(() => ({
 	margin: 0 8px 0 0;
 	opacity: 0.5;
 	flex-shrink: 0;
+	// MkDraggable のハンドル: ブラウザのジェスチャを抑止
+	touch-action: none;
 
 	&:active {
 		cursor: grabbing;