From d118c61ccc759133af55480a176f9b582adf767c Mon Sep 17 00:00:00 2001
From: fruitriin <nassii74@gmail.com>
Date: Wed, 3 Jun 2026 13:25:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?enhance(frontend):=20MkDraggable=20?=
 =?UTF-8?q?=E3=82=92=E3=82=BF=E3=83=83=E3=83=81=E6=93=8D=E4=BD=9C=20(?=
 =?UTF-8?q?=E9=95=B7=E6=8A=BC=E3=81=97=20=E2=86=92=20=E3=83=89=E3=83=A9?=
 =?UTF-8?q?=E3=83=83=E3=82=B0)=20=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

スマートフォン等のタッチデバイスで MkDraggable による並び替えができる
ようにする。ghost element を追従させながら elementFromPoint でドロップ先
を判定する。

ドラッグ開始モードを 3 種類から選べる:

- manualDragStart: ハンドル要素を触った瞬間に即ドラッグ開始 (待ち時間 0ms)
  → profile / server-rules / RolesEditorFormula / channel-editor /
     settings/navbar / page-editor のセクション
- longPress=true: 行全体を 400ms 長押しでドラッグ開始 (待ち時間中に動かす
  と通常スクロールに譲る) → MkWidgets (行が大きいケース)
- longPress=false (default): 行全体を一定量 (8px) 動かしたらドラッグ開始。
  tap (動かさず touchend) はそのまま click として通過するので、行内に tap
  メニュー等を持つアイテムでも両立する → MkPostFormAttaches / emoji-palette

iOS の long-press callout / 標準コンテキストメニューは touch session 中
だけ抑止し、PC の右クリックには干渉しない。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../frontend/src/components/MkDraggable.vue   | 395 +++++++++++++++++-
 .../frontend/src/components/MkWidgets.vue     |   1 +
 .../src/pages/admin/RolesEditorFormula.vue    |   6 +-
 .../frontend/src/pages/admin/server-rules.vue |   4 +-
 .../frontend/src/pages/channel-editor.vue     |   4 +-
 .../page-editor/els/page-editor.el.image.vue  |   3 +-
 .../page-editor/els/page-editor.el.note.vue   |   3 +-
 .../els/page-editor.el.section.vue            |   3 +-
 .../page-editor/els/page-editor.el.text.vue   |   3 +-
 .../pages/page-editor/page-editor.blocks.vue  |   3 +-
 .../page-editor/page-editor.container.vue     |   3 +-
 .../frontend/src/pages/settings/navbar.vue    |   4 +-
 .../frontend/src/pages/settings/profile.vue   |   4 +-
 13 files changed, 406 insertions(+), 30 deletions(-)

diff --git a/packages/frontend/src/components/MkDraggable.vue b/packages/frontend/src/components/MkDraggable.vue
index 6e2e038f87d..3a2785ddcdf 100644
--- a/packages/frontend/src/components/MkDraggable.vue
+++ b/packages/frontend/src/components/MkDraggable.vue
@@ -17,6 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div
 		v-if="modelValue.length === 0"
 		:class="$style.emptyDropArea"
+		:data-mk-draggable-empty-instance-id="instanceId"
 		@dragover.prevent.stop="() => {}"
 		@dragleave="() => {}"
 		@drop.prevent.stop="onEmptyDrop($event)"
@@ -27,19 +28,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:key="`MkDraggableRoot:${item.id}`"
 		:class="$style.item"
 		:draggable="!manualDragStart"
+		:data-mk-draggable-item-root="item.id"
 		@dragstart.stop="onDragstart($event, item)"
+		@touchstart.passive="manualDragStart ? undefined : onTouchstart($event, item)"
+		@contextmenu="onContextmenu"
 	>
 		<div
-			:class="[$style.forwardArea, { [$style.dropReady]: dropReadyArea[0] === item.id && dropReadyArea[1] === 'forward' }]"
+			:class="[$style.forwardArea, { [$style.dropReady]: isDropReady(item.id, 'forward') }]"
+			:data-mk-draggable-area="'forward'"
+			:data-mk-draggable-item-id="item.id"
+			:data-mk-draggable-instance-id="instanceId"
 			@dragover.prevent.stop="onDragover($event, item, false)"
 			@dragleave="onDragleave($event, item)"
 			@drop.prevent.stop="onDrop($event, item, false)"
 		></div>
 		<div :key="`MkDraggableItem:${item.id}`" style="position: relative; z-index: 0;">
-			<slot :item="item" :index="i" :dragStart="(ev) => onDragstart(ev, item)"></slot>
+			<slot :item="item" :index="i" :dragStart="(ev) => onDragstart(ev, item)" :touchStart="(ev) => onTouchstart(ev, item)"></slot>
 		</div>
 		<div
-			:class="[$style.backwardArea, { [$style.dropReady]: dropReadyArea[0] === item.id && dropReadyArea[1] === 'backward' }]"
+			:class="[$style.backwardArea, { [$style.dropReady]: isDropReady(item.id, 'backward') }]"
+			:data-mk-draggable-area="'backward'"
+			:data-mk-draggable-item-id="item.id"
+			:data-mk-draggable-instance-id="instanceId"
 			@dragover.prevent.stop="onDragover($event, item, true)"
 			@dragleave="onDragleave($event, item)"
 			@drop.prevent.stop="onDrop($event, item, true)"
@@ -55,15 +65,24 @@ import { ref } from 'vue';
 // 別々のコンポーネントインスタンス間でD&Dを融通するためにグローバルに状態を持っておく必要がある
 const dragging = ref(false);
 let dropCallback: ((targetInstanceId: string) => void) | null = null;
+
+// タッチ操作はDataTransferが使えないので、インスタンス間連携用にmodule-levelレジストリを用意する
+type TouchDropHandler = (draggedItem: { id: string }, sourceGroup: string, targetItemId: string, backward: boolean) => void;
+type TouchEmptyDropHandler = (draggedItem: { id: string }, sourceGroup: string) => void;
+const touchDropHandlers = new Map<string, TouchDropHandler>();
+const touchEmptyDropHandlers = new Map<string, TouchEmptyDropHandler>();
+
+// 全インスタンスで共有するタッチドロップ位置 (インスタンスIDで自インスタンス判定する)
+const touchDropTarget = ref<{ instanceId: string; itemId: string; area: 'forward' | 'backward' } | null>(null);
 </script>
 
 <script lang="ts" setup generic="T extends { id: string; }">
-import { nextTick } from 'vue';
+import { nextTick, onBeforeUnmount } from 'vue';
 import { getDragData, setDragData } from '@/drag-and-drop.js';
 import { genId } from '@/utility/id.js';
 
 const slots = defineSlots<{
-	default(props: { item: T; index: number; dragStart: (ev: DragEvent) => void }): any;
+	default(props: { item: T; index: number; dragStart: (ev: DragEvent) => void; touchStart: (ev: TouchEvent) => void }): any;
 	header(): any;
 	footer(): any;
 }>();
@@ -73,11 +92,24 @@ const props = withDefaults(defineProps<{
 	direction: 'horizontal' | 'vertical';
 	group?: string | null;
 	manualDragStart?: boolean;
+	/**
+	 * タッチ操作時のドラッグ開始モードを切り替える。
+	 * - `true` (long-press): 行を一定時間長押し (400ms) してからドラッグ開始。
+	 *   行の中に tap で発火させたい要素がなく、画面スクロールに譲りたい縦長リスト向け。
+	 * - `false` (default): 行を触ってから一定量 (8px) 動かしたらドラッグ開始。
+	 *   tap (動かさずに離す) は親要素の click ハンドラに通すので、行内に tap で
+	 *   メニューを開くようなアイテム (画像サムネ、リアクション絵文字など) があっても両立する。
+	 *
+	 * `manualDragStart` が `true` の場合はこの prop は参照されず、ハンドル要素を触った
+	 * 瞬間 (待ち時間 0ms) からドラッグが始まる。
+	 */
+	longPress?: boolean;
 	withGaps?: boolean;
 	canNest?: boolean;
 }>(), {
 	group: null,
 	manualDragStart: false,
+	longPress: false,
 	withGaps: false,
 	canNest: false,
 });
@@ -90,6 +122,13 @@ const dropReadyArea = ref<[T['id'] | null, 'forward' | 'backward' | null]>([null
 const instanceId = genId();
 const group = props.group ?? instanceId;
 
+function isDropReady(itemId: T['id'], area: 'forward' | 'backward') {
+	if (dropReadyArea.value[0] === itemId && dropReadyArea.value[1] === area) return true;
+	const t = touchDropTarget.value;
+	if (t != null && t.instanceId === instanceId && t.itemId === itemId && t.area === area) return true;
+	return false;
+}
+
 function onDragstart(ev: DragEvent, item: T) {
 	if (ev.dataTransfer == null) return;
 	ev.dataTransfer.effectAllowed = 'move';
@@ -125,24 +164,29 @@ function onDragleave(ev: DragEvent, item: T) {
 	dropReadyArea.value = [null, null];
 }
 
-function onDrop(ev: DragEvent, item: T, backward: boolean) {
-	const dragged = getDragData(ev, 'MkDraggable');
-	dropReadyArea.value = [null, null];
-	if (dragged == null || dragged.group !== group || dragged.item.id === item.id) return;
-	dropCallback?.(instanceId);
+function applyDrop(draggedItem: T, sourceGroup: string, targetItemId: T['id'], backward: boolean) {
+	if (sourceGroup !== group || draggedItem.id === targetItemId) return;
 
-	const fromIndex = props.modelValue.findIndex(x => x.id === dragged.item.id);
-	let toIndex = props.modelValue.findIndex(x => x.id === item.id);
+	const fromIndex = props.modelValue.findIndex(x => x.id === draggedItem.id);
+	let toIndex = props.modelValue.findIndex(x => x.id === targetItemId);
 
 	const newValue = [...props.modelValue];
 	if (fromIndex > -1) newValue.splice(fromIndex, 1);
-	toIndex = newValue.findIndex(x => x.id === item.id);
+	toIndex = newValue.findIndex(x => x.id === targetItemId);
 	if (backward) toIndex += 1;
-	newValue.splice(toIndex, 0, dragged.item as T);
+	newValue.splice(toIndex, 0, draggedItem);
 
 	emit('update:modelValue', newValue);
 }
 
+function onDrop(ev: DragEvent, item: T, backward: boolean) {
+	const dragged = getDragData(ev, 'MkDraggable');
+	dropReadyArea.value = [null, null];
+	if (dragged == null) return;
+	dropCallback?.(instanceId);
+	applyDrop(dragged.item as T, dragged.group, item.id, backward);
+}
+
 function onEmptyDrop(ev: DragEvent) {
 	const dragged = getDragData(ev, 'MkDraggable');
 	if (dragged == null) return;
@@ -150,6 +194,302 @@ function onEmptyDrop(ev: DragEvent) {
 
 	emit('update:modelValue', [dragged.item as T]);
 }
+
+// ---------- タッチ操作 ----------
+
+const LONG_PRESS_MS = 400;
+const MOVE_THRESHOLD_PX = 8;
+
+type TouchPending = {
+	identifier: number;
+	x: number;
+	y: number;
+	sourceElement: HTMLElement | null;
+	item: T;
+};
+
+let touchPending: TouchPending | null = null;
+let touchLongPressTimer: number | null = null;
+let touchDragActive = false;
+let touchDragSession: { item: T; instanceId: string; group: string } | null = null;
+let touchGhostEl: HTMLElement | null = null;
+
+function findTouchByIdentifier(list: TouchList, id: number): Touch | null {
+	for (let i = 0; i < list.length; i++) {
+		if (list[i].identifier === id) return list[i];
+	}
+	return null;
+}
+
+function clearTouchLongPress() {
+	if (touchLongPressTimer != null) {
+		window.clearTimeout(touchLongPressTimer);
+		touchLongPressTimer = null;
+	}
+}
+
+function teardownTouchListeners() {
+	window.removeEventListener('touchmove', onWindowTouchMove);
+	window.removeEventListener('touchend', onWindowTouchEnd);
+	window.removeEventListener('touchcancel', onWindowTouchEnd);
+}
+
+// touch session 中、source item の draggable 属性を一時的に false にしておくことで、
+// HTML5 drag-and-drop との競合 (DevTools のタッチエミュレーションでは下層のマウスから
+// dragstart が発火してしまい touchmove フローを阻害する) を避ける。
+// 実機モバイルでは元々 touch から HTML5 drag は起きないので無害。
+function restoreTouchSourceDraggable() {
+	const el = touchPending?.sourceElement;
+	if (el != null && !props.manualDragStart) {
+		el.setAttribute('draggable', 'true');
+	}
+}
+
+// touch session 中 (長押し待ち中 / drag 中) は contextmenu を抑止する。
+// draggable=false に切り替えた副作用で、DevTools のタッチエミュレーション環境では
+// mouse-down 長押しが contextmenu を呼んでしまうため。
+// preventDefault でブラウザのデフォルトメニュー、stopPropagation で Misskey 上位の
+// カスタムコンテキストメニュー (バブリングで上位 listener に到達するもの) も止める。
+// touch session 外 (= PC でのまとも右クリック) は素通しなので副作用なし。
+function onContextmenu(ev: MouseEvent) {
+	if (touchPending != null || touchDragActive) {
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+}
+
+function cleanupTouchDrag() {
+	restoreTouchSourceDraggable();
+	touchDragActive = false;
+	touchDragSession = null;
+	touchPending = null;
+	touchDropTarget.value = null;
+	dragging.value = false;
+	dropCallback = null;
+	if (touchGhostEl != null) {
+		touchGhostEl.remove();
+		touchGhostEl = null;
+	}
+	teardownTouchListeners();
+}
+
+function onTouchstart(ev: TouchEvent, item: T) {
+	if (ev.touches.length !== 1) return;
+	if (touchDragActive || touchPending != null) return;
+	const t = ev.touches[0];
+	const target = ev.target as HTMLElement | null;
+	const itemEl = target?.closest<HTMLElement>(`[data-mk-draggable-item-root="${CSS.escape(item.id)}"]`) ?? null;
+
+	// HTML5 drag との競合を防ぐため、この touch session 中は draggable を一時的に無効化
+	if (itemEl != null && !props.manualDragStart) {
+		itemEl.setAttribute('draggable', 'false');
+	}
+
+	touchPending = {
+		identifier: t.identifier,
+		x: t.clientX,
+		y: t.clientY,
+		sourceElement: itemEl,
+		item,
+	};
+	clearTouchLongPress();
+
+	if (props.manualDragStart) {
+		// ハンドル経由は明示的にハンドルを掴んだ意図表明なので待たずに即開始
+		startTouchDrag();
+	} else if (props.longPress) {
+		// 行全体を長押しさせるモード: タイマー成立まで何もせず、しきい値を超えて動いたらキャンセル
+		touchLongPressTimer = window.setTimeout(startTouchDrag, LONG_PRESS_MS);
+	}
+	// それ以外 (即時 + 移動しきい値モード): touchmove で MOVE_THRESHOLD_PX を超えた時点で開始
+
+	window.addEventListener('touchmove', onWindowTouchMove, { passive: false });
+	window.addEventListener('touchend', onWindowTouchEnd);
+	window.addEventListener('touchcancel', onWindowTouchEnd);
+}
+
+function startTouchDrag() {
+	if (touchPending == null) return;
+	touchDragActive = true;
+	const item = touchPending.item;
+	touchDragSession = { item, instanceId, group };
+	dragging.value = true;
+
+	// sourceRect は touchstart 時点でなく drag 開始時点で取り直す (待ち時間中にレイアウトが
+	// 変動する可能性があるため)
+	if (touchPending.sourceElement != null) {
+		const rect = touchPending.sourceElement.getBoundingClientRect();
+		const ghost = touchPending.sourceElement.cloneNode(true) as HTMLElement;
+		ghost.style.position = 'fixed';
+		ghost.style.pointerEvents = 'none';
+		ghost.style.top = `${rect.top}px`;
+		ghost.style.left = `${rect.left}px`;
+		ghost.style.width = `${rect.width}px`;
+		ghost.style.margin = '0';
+		ghost.style.opacity = '0.85';
+		ghost.style.zIndex = '2147483647';
+		ghost.style.boxShadow = '0 8px 24px rgba(0, 0, 0, 0.3)';
+		ghost.style.transition = 'transform 0.05s linear';
+		ghost.style.transformOrigin = 'top left';
+		window.document.body.appendChild(ghost);
+		touchGhostEl = ghost;
+	}
+
+	dropCallback = (targetInstanceId) => {
+		if (targetInstanceId === instanceId) return;
+		const newValue = props.modelValue.filter(x => x.id !== item.id);
+		emit('update:modelValue', newValue);
+	};
+
+	if ('vibrate' in navigator) {
+		try {
+			navigator.vibrate(30);
+		} catch {
+			// noop
+		}
+	}
+}
+
+function onWindowTouchMove(ev: TouchEvent) {
+	if (touchPending == null) return;
+	const t = findTouchByIdentifier(ev.touches, touchPending.identifier);
+	if (t == null) return;
+
+	if (!touchDragActive) {
+		const dx = Math.abs(t.clientX - touchPending.x);
+		const dy = Math.abs(t.clientY - touchPending.y);
+		const moved = dx > MOVE_THRESHOLD_PX || dy > MOVE_THRESHOLD_PX;
+		if (!moved) return;
+
+		if (props.longPress) {
+			// 長押し成立前に動いたらキャンセル (通常スクロールへ譲る)
+			clearTouchLongPress();
+			restoreTouchSourceDraggable();
+			touchPending = null;
+			teardownTouchListeners();
+		} else {
+			// 即時モード: 動き出した瞬間がドラッグ開始のトリガー。
+			// tap (動かさず touchend) は touchend 側で touchDragActive=false のまま素通しになり
+			// ブラウザの click 合成を妨げない。
+			startTouchDrag();
+		}
+		return;
+	}
+
+	ev.preventDefault();
+
+	if (touchGhostEl != null) {
+		const dx = t.clientX - touchPending.x;
+		const dy = t.clientY - touchPending.y;
+		touchGhostEl.style.transform = `translate(${dx}px, ${dy}px)`;
+	}
+
+	// elementFromPoint で実際のドロップターゲットを判定 (ghostは一時的に隠す)
+	const prevGhostDisplay = touchGhostEl?.style.display ?? '';
+	if (touchGhostEl != null) touchGhostEl.style.display = 'none';
+	const el = window.document.elementFromPoint(t.clientX, t.clientY) as HTMLElement | null;
+	if (touchGhostEl != null) touchGhostEl.style.display = prevGhostDisplay;
+
+	if (el == null) {
+		touchDropTarget.value = null;
+		return;
+	}
+
+	const areaEl = el.closest<HTMLElement>('[data-mk-draggable-area]');
+	if (areaEl != null) {
+		const targetInstanceId = areaEl.dataset.mkDraggableInstanceId;
+		const targetItemId = areaEl.dataset.mkDraggableItemId;
+		const area = areaEl.dataset.mkDraggableArea as 'forward' | 'backward' | undefined;
+		if (targetInstanceId != null && targetItemId != null && (area === 'forward' || area === 'backward')) {
+			touchDropTarget.value = { instanceId: targetInstanceId, itemId: targetItemId, area };
+			return;
+		}
+	}
+	touchDropTarget.value = null;
+}
+
+function onWindowTouchEnd(ev: TouchEvent) {
+	// touchcancel は identifier の追跡を放棄し、状態を完全にクリーンアップする
+	if (ev.type === 'touchcancel') {
+		if (touchDragActive) {
+			cleanupTouchDrag();
+		} else {
+			clearTouchLongPress();
+			restoreTouchSourceDraggable();
+			touchPending = null;
+			teardownTouchListeners();
+		}
+		return;
+	}
+
+	// 追跡中の指の touchend だけを処理 (他の指の touchend では何もしない)
+	if (touchPending == null) return;
+	if (findTouchByIdentifier(ev.changedTouches, touchPending.identifier) == null) return;
+
+	if (!touchDragActive) {
+		clearTouchLongPress();
+		restoreTouchSourceDraggable();
+		touchPending = null;
+		teardownTouchListeners();
+		return;
+	}
+
+	const target = touchDropTarget.value;
+	const session = touchDragSession;
+
+	if (session != null && target != null) {
+		const handler = touchDropHandlers.get(target.instanceId);
+		if (handler != null) {
+			dropCallback?.(target.instanceId);
+			handler(session.item, session.group, target.itemId, target.area === 'backward');
+		}
+	} else if (session != null) {
+		// emptyDropArea にドロップしたか確認
+		const endTouch = findTouchByIdentifier(ev.changedTouches, touchPending.identifier);
+		if (endTouch != null) {
+			if (touchGhostEl != null) touchGhostEl.style.display = 'none';
+			const el = window.document.elementFromPoint(endTouch.clientX, endTouch.clientY) as HTMLElement | null;
+			const emptyEl = el?.closest<HTMLElement>('[data-mk-draggable-empty-instance-id]');
+			if (emptyEl != null) {
+				const targetInstanceId = emptyEl.dataset.mkDraggableEmptyInstanceId;
+				if (targetInstanceId != null) {
+					const handler = touchEmptyDropHandlers.get(targetInstanceId);
+					if (handler != null) {
+						dropCallback?.(targetInstanceId);
+						handler(session.item, session.group);
+					}
+				}
+			}
+		}
+	}
+
+	cleanupTouchDrag();
+}
+
+// ---------- レジストリ登録 ----------
+
+touchDropHandlers.set(instanceId, (draggedItem, sourceGroup, targetItemId, backward) => {
+	applyDrop(draggedItem as T, sourceGroup, targetItemId, backward);
+});
+touchEmptyDropHandlers.set(instanceId, (draggedItem, sourceGroup) => {
+	if (sourceGroup !== group) return;
+	emit('update:modelValue', [draggedItem as T]);
+});
+
+onBeforeUnmount(() => {
+	touchDropHandlers.delete(instanceId);
+	touchEmptyDropHandlers.delete(instanceId);
+	if (touchDragSession?.instanceId === instanceId) {
+		cleanupTouchDrag();
+	} else if (touchPending != null) {
+		// 長押し成立前 (touchPending のみ、touchDragSession 未開始) に unmount された場合の
+		// window listener / タイマーリーク対策
+		clearTouchLongPress();
+		restoreTouchSourceDraggable();
+		touchPending = null;
+		teardownTouchListeners();
+	}
+});
 </script>
 
 <style lang="scss" module>
@@ -182,6 +522,33 @@ function onEmptyDrop(ev: DragEvent) {
 
 .item {
 	position: relative;
+
+	// 縦スクロール (= ページスクロール) はブラウザに譲り、それ以外のタッチジェスチャ
+	// (横スワイプやピンチズーム等) は抑止する。指を動かせばスクロール、指を止めれば
+	// 長押し成立 → 並び替えという直感的な切り替えになる。横方向 MkDraggable でも
+	// ページの縦スクロールは通したいので、direction によらず一律 pan-y。
+	// ※ 横スクロール可能なコンテナに horizontal MkDraggable を入れる場合は、利用側で
+	//   `touch-action` を上書きする必要がある。
+	touch-action: pan-y;
+
+	// iOS: 長押し時のコンテキストメニュー (Copy / Define / リンクプレビュー等) を抑止 —
+	// 長押しドラッグと競合するため。
+	-webkit-touch-callout: none;
+}
+
+// タッチデバイスでのみ text selection を抑止 (PC では選択を残す)。
+// pointer:coarse + hover:none で touch-primary 端末を判定。
+@media (hover: none) and (pointer: coarse) {
+	.item {
+		-webkit-user-select: none;
+		user-select: none;
+	}
+
+	// form 要素や contenteditable は子で選択可に戻す
+	.item :where(textarea, input, [contenteditable]) {
+		-webkit-user-select: auto;
+		user-select: auto;
+	}
 }
 
 .items.vertical .item {
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index a27613c24c9..2e7358c33a5 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -17,6 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:modelValue="props.widgets"
 			direction="vertical"
 			withGaps
+			longPress
 			group="MkWidgets"
 			@update:modelValue="v => emit('updateWidgets', v)"
 		>
diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.vue b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
index 384282262d3..f441f5913ea 100644
--- 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" :draggable="true" @dragstart.stop="dragStartCallback" @touchstart.passive="touchStartCallback">
 			<i class="ti ti-menu-2"></i>
 		</button>
 		<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf">
@@ -25,12 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			manualDragStart
 			group="roleFormula"
 		>
-			<template #default="{ item, dragStart }">
+			<template #default="{ item, dragStart, touchStart }">
 				<div :class="$style.item">
 					<!-- divが無いとエラーになる -->
 					<RolesEditorFormula
 						:modelValue="item"
 						:dragStartCallback="dragStart"
+						:touchStartCallback="touchStart"
 						draggable
 						@update:modelValue="updated => childValuesItemUpdated(updated)"
 						@remove="removeChildItem(item.id)"
@@ -79,6 +80,7 @@ const props = defineProps<{
 	modelValue: Misskey.entities.Role['condFormula'];
 	draggable?: boolean;
 	dragStartCallback?: (ev: DragEvent) => void;
+	touchStartCallback?: (ev: TouchEvent) => void;
 }>();
 
 const v = ref(deepClone(props.modelValue));
diff --git a/packages/frontend/src/pages/admin/server-rules.vue b/packages/frontend/src/pages/admin/server-rules.vue
index 02aad732f65..1c4fdb8c6ee 100644
--- 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, dragStart, touchStart }">
 					<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" :draggable="true" @dragstart.stop="dragStart" @touchstart.passive="touchStart"><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"/>
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index fce69aad796..42caaba06bc 100644
--- 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, dragStart, touchStart }">
 							<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" :draggable="true" @dragstart.stop="dragStart" @touchstart.passive="touchStart"><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>
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
index 440daa65881..7dff68ef6ea 100644
--- 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" :dragStartCallback="dragStartCallback" :touchStartCallback="touchStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-photo"></i> {{ i18n.ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
@@ -31,6 +31,7 @@ import { chooseDriveFile } from '@/utility/drive.js';
 
 const props = defineProps<{
 	dragStartCallback?: (ev: DragEvent) => void;
+	touchStartCallback?: (ev: TouchEvent) => 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
index 8444f876648..e9dda185859 100644
--- 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" :dragStartCallback="dragStartCallback" :touchStartCallback="touchStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ i18n.ts._pages.blocks.note }}</template>
 
 	<section style="padding: 16px;" class="_gaps_s">
@@ -35,6 +35,7 @@ import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
 	dragStartCallback?: (ev: DragEvent) => void;
+	touchStartCallback?: (ev: TouchEvent) => 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
index 53317390b37..790859230c3 100644
--- 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" :dragStartCallback="dragStartCallback" :touchStartCallback="touchStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
@@ -36,6 +36,7 @@ const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
 const props = defineProps<{
 	dragStartCallback?: (ev: DragEvent) => void;
+	touchStartCallback?: (ev: TouchEvent) => 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
index 9fb7b7425be..f44d5b3aced 100644
--- 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" :dragStartCallback="dragStartCallback" :touchStartCallback="touchStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section>
@@ -23,6 +23,7 @@ import { Autocomplete } from '@/utility/autocomplete.js';
 
 const props = defineProps<{
 	dragStartCallback?: (ev: DragEvent) => void;
+	touchStartCallback?: (ev: TouchEvent) => 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
index 4fd05b475c5..93b618a1a79 100644
--- 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,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	group="pageBlocks"
 	@update:modelValue="v => emit('update:modelValue', v)"
 >
-	<template #default="{ item, dragStart }">
+	<template #default="{ item, dragStart, touchStart }">
 		<div>
 			<!-- divが無いとエラーになる -->
 			<component
 				:is="getComponent(item.type)"
 				:modelValue="item"
 				:dragStartCallback="dragStart"
+				:touchStartCallback="touchStart"
 				@update:modelValue="updateItem"
 				@remove="() => removeItem(item)"
 			/>
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
index 6e2d500d96f..0ebc5eca8ad 100644
--- 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" :draggable="true" @dragstart.stop="dragStartCallback" @touchstart.passive="touchStartCallback">
 				<i class="ti ti-menu-2"></i>
 			</button>
 			<button class="_button" @click="toggleContent(!showBody)">
@@ -35,6 +35,7 @@ const props = withDefaults(defineProps<{
 	removable?: boolean;
 	draggable?: boolean;
 	dragStartCallback?: (ev: DragEvent) => void;
+	touchStartCallback?: (ev: TouchEvent) => void;
 }>(), {
 	expanded: true,
 	removable: true,
diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
index a2fab68e413..c494388a5ce 100644
--- 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, dragStart, touchStart }">
 						<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" :draggable="true" @dragstart.stop="dragStart" @touchstart.passive="touchStart"><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>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 966a1309552..4faaffecdd1 100644
--- 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, dragStart, touchStart }">
 								<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" :draggable="true" @dragstart.stop="dragStart" @touchstart.passive="touchStart"><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">

From f70c39be8d351c1e913b61a8033ca151d5725282 Mon Sep 17 00:00:00 2001
From: fruitriin <nassii74@gmail.com>
Date: Wed, 3 Jun 2026 14:22:09 +0900
Subject: [PATCH 2/2] =?UTF-8?q?CHANGELOG=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d084006562c..ff41135b95b 100644
--- 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: リモートノートクリーニングジョブのスキップ処理のパフォーマンス改善