From 8b92038c52db251ca5c9ef734c1d932a1e8352ae Mon Sep 17 00:00:00 2001
From: fruitriin <nassii74@gmail.com>
Date: Wed, 3 Jun 2026 15:34:48 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix(frontend):=20MkDraggable=20=E3=81=AE?=
 =?UTF-8?q?=E5=88=A5=E3=82=B0=E3=83=AB=E3=83=BC=E3=83=97=E9=96=93=E3=83=89?=
 =?UTF-8?q?=E3=83=AD=E3=83=83=E3=83=97=E3=81=A7=20item=20=E3=81=8C?=
 =?UTF-8?q?=E6=B6=88=E5=A4=B1=E3=81=99=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ドロップハンドラが group 不一致で no-op になった際にも source 側で
削除が走っていたため、別 group の MkDraggable に誤ってドロップすると
item が消失していた。handler の戻り値を boolean 化し、target 側で
処理が成立した場合のみ source から削除するよう修正。

合わせて onPointerDown 内の重複コメントを 1 行に短縮し、
page-editor.el.note.vue 内の不要な空行 (削除済み eslint-disable の跡)
を整理した。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../frontend/src/components/MkDraggable.vue   | 470 +++++++++++++++---
 .../page-editor/els/page-editor.el.note.vue   |   5 +-
 2 files changed, 409 insertions(+), 66 deletions(-)

diff --git a/packages/frontend/src/components/MkDraggable.vue b/packages/frontend/src/components/MkDraggable.vue
index 6e2e038f87d..760195eff08 100644
--- a/packages/frontend/src/components/MkDraggable.vue
+++ b/packages/frontend/src/components/MkDraggable.vue
@@ -17,32 +17,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div
 		v-if="modelValue.length === 0"
 		:class="$style.emptyDropArea"
-		@dragover.prevent.stop="() => {}"
-		@dragleave="() => {}"
-		@drop.prevent.stop="onEmptyDrop($event)"
+		:data-mk-draggable-empty-instance-id="instanceId"
 	>
 	</div>
 	<div
 		v-for="(item, i) in modelValue"
 		:key="`MkDraggableRoot:${item.id}`"
 		:class="$style.item"
-		:draggable="!manualDragStart"
-		@dragstart.stop="onDragstart($event, item)"
+		:data-mk-draggable-item-root="item.id"
+		@pointerdown="manualDragStart ? undefined : onPointerDown($event, item)"
+		@contextmenu="onContextmenu"
 	>
 		<div
-			:class="[$style.forwardArea, { [$style.dropReady]: dropReadyArea[0] === item.id && dropReadyArea[1] === 'forward' }]"
-			@dragover.prevent.stop="onDragover($event, item, false)"
-			@dragleave="onDragleave($event, item)"
-			@drop.prevent.stop="onDrop($event, item, false)"
+			: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"
 		></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" :pointerStart="(ev: PointerEvent) => onPointerDown(ev, item)"></slot>
 		</div>
 		<div
-			:class="[$style.backwardArea, { [$style.dropReady]: dropReadyArea[0] === item.id && dropReadyArea[1] === 'backward' }]"
-			@dragover.prevent.stop="onDragover($event, item, true)"
-			@dragleave="onDragleave($event, item)"
-			@drop.prevent.stop="onDrop($event, item, true)"
+			: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"
 		></div>
 	</div>
 	<slot name="footer"></slot>
@@ -52,18 +51,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts">
 import { ref } from 'vue';
 
-// 別々のコンポーネントインスタンス間でD&Dを融通するためにグローバルに状態を持っておく必要がある
+// インスタンス間でドラッグセッションを連携するため module-level に状態を持つ。
+// Pointer Events に統一したことで HTML5 drag-and-drop の DataTransfer を介した
+// シリアライズが不要になり、ハンドラレジストリ 1 つだけで完結する。
 const dragging = ref(false);
-let dropCallback: ((targetInstanceId: string) => void) | null = null;
+
+// handler は group 不一致等で no-op の場合 false を返す。source 側はこの戻り値を見て
+// `removeSourceCallback` の発火可否を決め、別 group へドロップした時の item 消失を防ぐ。
+type DropHandler = (item: { id: string }, sourceGroup: string, targetItemId: string, backward: boolean) => boolean;
+type EmptyDropHandler = (item: { id: string }, sourceGroup: string) => boolean;
+const dropHandlers = new Map<string, DropHandler>();
+const emptyDropHandlers = new Map<string, EmptyDropHandler>();
+
+const dropTarget = 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 { getDragData, setDragData } from '@/drag-and-drop.js';
+import { onBeforeUnmount } from 'vue';
 import { genId } from '@/utility/id.js';
 
+/**
+ * default スロットの `pointerStart` を `manualDragStart=true` のハンドル要素に配線する場合、
+ * そのハンドル要素には CSS で `touch-action: none` を指定すること。
+ * Pointer Events 仕様 (§11.1) によりブラウザは pointerdown の瞬間にジェスチャ判定を確定する
+ * ため、JS から後で touch-action を書き換えても間に合わない。touch-action: none を予め
+ * 指定しておかないと、ハンドルを掴んでから指を縦に動かした瞬間にブラウザがスクロール
+ * ジェスチャを始めて pointercancel を投げてくる。
+ */
 const slots = defineSlots<{
-	default(props: { item: T; index: number; dragStart: (ev: DragEvent) => void }): any;
+	default(props: { item: T; index: number; pointerStart: (ev: PointerEvent) => void }): any;
 	header(): any;
 	footer(): any;
 }>();
@@ -86,70 +102,371 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: T[]): void;
 }>();
 
-const dropReadyArea = ref<[T['id'] | null, 'forward' | 'backward' | null]>([null, null]);
 const instanceId = genId();
 const group = props.group ?? instanceId;
 
-function onDragstart(ev: DragEvent, item: T) {
-	if (ev.dataTransfer == null) return;
-	ev.dataTransfer.effectAllowed = 'move';
-	setDragData(ev, 'MkDraggable', { item, instanceId, group });
+function isDropReady(itemId: T['id'], area: 'forward' | 'backward'): boolean {
+	const t = dropTarget.value;
+	return t != null && t.instanceId === instanceId && t.itemId === itemId && t.area === area;
+}
+
+function applyDrop(draggedItem: T, sourceGroup: string, targetItemId: T['id'], backward: boolean): boolean {
+	if (sourceGroup !== group || draggedItem.id === targetItemId) return false;
+
+	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 === targetItemId);
+	if (backward) toIndex += 1;
+	newValue.splice(toIndex, 0, draggedItem);
+
+	emit('update:modelValue', newValue);
+	return true;
+}
+
+// ---------- pointer events ----------
+
+const LONG_PRESS_MS = 400;
+const MOVE_THRESHOLD_PX = 8;
+
+type Pending = {
+	pointerId: number;
+	pointerType: string;
+	x: number;
+	y: number;
+	captureTarget: HTMLElement;
+	sourceElement: HTMLElement | null;
+	item: T;
+};
+
+let pending: Pending | null = null;
+let longPressTimer: number | null = null;
+let dragActive = false;
+let dragSession: { item: T; instanceId: string; group: string } | null = null;
+let ghostEl: HTMLElement | null = null;
+let removeSourceCallback: (() => void) | null = null;
+
+function clearLongPress() {
+	if (longPressTimer != null) {
+		window.clearTimeout(longPressTimer);
+		longPressTimer = null;
+	}
+}
+
+function detachPointerListeners() {
+	if (pending == null) return;
+	pending.captureTarget.removeEventListener('pointermove', onPointerMove);
+	pending.captureTarget.removeEventListener('pointerup', onPointerUp);
+	pending.captureTarget.removeEventListener('pointercancel', onPointerCancel);
+}
+
+function releaseCapture() {
+	if (pending == null) return;
+	try {
+		if (pending.captureTarget.hasPointerCapture(pending.pointerId)) {
+			pending.captureTarget.releasePointerCapture(pending.pointerId);
+		}
+	} catch {
+		// noop
+	}
+}
+
+function cleanup() {
+	detachPointerListeners();
+	releaseCapture();
+	clearLongPress();
+	const wasTouch = pending?.pointerType === 'touch';
+	dragActive = false;
+	dragSession = null;
+	pending = null;
+	dropTarget.value = null;
+	dragging.value = false;
+	removeSourceCallback = null;
+	if (ghostEl != null) {
+		ghostEl.remove();
+		ghostEl = null;
+	}
+	if (wasTouch) {
+		// cleanup の後にも contextmenu が遅延して飛んでくる経路があるため、少し遅らせて外す
+		scheduleContextmenuSuppressorRelease();
+	}
+}
+
+// タッチ長押し中、ブラウザ / OS が contextmenu イベントを投げてくることへの対策。
+// 経路がいくつかあって厄介:
+//   1. .item div 上の listener で stopPropagation するだけでは pointercancel → cleanup
+//      の後に contextmenu が発火するケースで `pending`/`dragActive` が false になっており
+//      捕捉できない (祖先の Misskey 共通 contextmenu に到達してしまう)。
+//   2. キャプチャ要素の touch-action: none だけでは contextmenu イベント自体は抑止できない。
+//   3. Misskey 側の `@contextmenu` リスナーは祖先側 (universal.vue 等) にも複数存在し、
+//      .stop 修飾子 (bubble 中の stopPropagation) を尊重して順序通り発火する。
+//
+// 対策: touch pointerdown と同時に document に capture phase で contextmenu を
+// 完全抑止する listener を張り、cleanup 後しばらく ( SUPPRESS_AFTER_CLEANUP_MS )
+// 残してから外す。これで上記すべての timing で確実に止められる。
+const SUPPRESS_AFTER_CLEANUP_MS = 500;
+let contextmenuSuppressorActive = false;
+let contextmenuSuppressorTimer: number | null = null;
+
+function suppressContextmenuListener(ev: Event) {
+	ev.preventDefault();
+	ev.stopImmediatePropagation();
+}
+
+function attachContextmenuSuppressor() {
+	if (contextmenuSuppressorActive) return;
+	contextmenuSuppressorActive = true;
+	window.document.addEventListener('contextmenu', suppressContextmenuListener, { capture: true });
+}
+
+function scheduleContextmenuSuppressorRelease() {
+	if (contextmenuSuppressorTimer != null) {
+		window.clearTimeout(contextmenuSuppressorTimer);
+	}
+	contextmenuSuppressorTimer = window.setTimeout(() => {
+		window.document.removeEventListener('contextmenu', suppressContextmenuListener, { capture: true });
+		contextmenuSuppressorActive = false;
+		contextmenuSuppressorTimer = null;
+	}, SUPPRESS_AFTER_CLEANUP_MS);
+}
+
+// .item div 上では PC の右クリックも捕まえるので、touch session 外は何もしない。
+// (タッチ経路は document の capture phase suppressor 側で抑止される)
+function onContextmenu(ev: MouseEvent) {
+	if (pending != null || dragActive) {
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+}
+
+function onPointerDown(ev: PointerEvent, item: T) {
+	if (pending != null || dragActive) return;
+	// mouse は左ボタンだけ受け付ける (右クリックメニュー等を阻害しない)
+	if (ev.pointerType === 'mouse' && ev.button !== 0) return;
+
+	// capture / listener 対象は ev.currentTarget (= ハンドル button などの小さい要素) ではなく
+	// MkDraggable の `.item` div を選ぶ。これで指がハンドルの矩形を外れても capture が保持され、
+	// pointermove が滑らかに届き続ける。また button 固有の implicit pointer release 挙動
+	// (focus 抜け・blur 時の解放など) に左右されない。
+	const origin = ev.currentTarget as HTMLElement;
+	const itemEl = origin.closest<HTMLElement>(`[data-mk-draggable-item-root="${CSS.escape(item.id)}"]`) ?? origin;
+	const captureTarget = itemEl;
+	const sourceElement = itemEl;
+
+	pending = {
+		pointerId: ev.pointerId,
+		pointerType: ev.pointerType,
+		x: ev.clientX,
+		y: ev.clientY,
+		captureTarget,
+		sourceElement,
+		item,
+	};
+
+	// 祖先の Misskey 共通コンテキストメニューが暴発しないよう document に capture phase で抑止を張る
+	// (詳細は suppressContextmenuListener 付近のコメント参照)
+	if (ev.pointerType === 'touch') {
+		attachContextmenuSuppressor();
+	}
+
+	try {
+		captureTarget.setPointerCapture(ev.pointerId);
+	} catch {
+		// noop
+	}
+
+	captureTarget.addEventListener('pointermove', onPointerMove);
+	captureTarget.addEventListener('pointerup', onPointerUp);
+	captureTarget.addEventListener('pointercancel', onPointerCancel);
+
+	if (props.manualDragStart) {
+		// ハンドル経由は明示的な意図表明なので即時開始
+		startDrag();
+	} else if (ev.pointerType === 'touch') {
+		// 行全体掴み × touch では touch-action: pan-y がスクロールを横取りするため、
+		// 動かしてから開始する方式は構造的に成立しない。SortableJS や iOS の編集モード
+		// 等と同じ「長押しで並び替え、動かせばスクロール」の挙動に統一する。
+		longPressTimer = window.setTimeout(startDrag, LONG_PRESS_MS);
+	}
+	// それ以外 (mouse / pen): pointermove で MOVE_THRESHOLD_PX を超えたら開始
+}
+
+function startDrag() {
+	if (pending == null) return;
+	dragActive = true;
+	const item = pending.item;
+	dragSession = { item, instanceId, group };
+	dragging.value = true;
 
-	const target = ev.target as HTMLElement;
-	target.addEventListener('dragend', (ev) => {
-		dragging.value = false;
-		dropReadyArea.value = [null, null];
-	}, { once: true });
+	// mouse は textnode の選択が始まっていることがあるのでクリアする
+	if (pending.pointerType === 'mouse') {
+		window.getSelection()?.removeAllRanges();
+	}
+
+	if (pending.sourceElement != null) {
+		const rect = pending.sourceElement.getBoundingClientRect();
+		const ghost = pending.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';
+		// Ghost は body 直下に配置されるため container-type を持つ祖先が外れる。
+		// 子孫の @container クエリ (例: profile の .fieldDragItem) が元と同じ評価結果に
+		// なるよう、Ghost 自身を inline-size container にする。
+		ghost.style.containerType = 'inline-size';
+		window.document.body.appendChild(ghost);
+		ghostEl = ghost;
+	}
 
-	dropCallback = (targetInstanceId) => {
-		if (targetInstanceId === instanceId) return;
+	removeSourceCallback = () => {
 		const newValue = props.modelValue.filter(x => x.id !== item.id);
 		emit('update:modelValue', newValue);
 	};
 
-	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
-	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
-	// SEE: https://issues.chromium.org/issues/41150279
-	window.setTimeout(() => {
-		dragging.value = true;
-	}, 10);
+	if (pending.pointerType === 'touch' && 'vibrate' in navigator) {
+		try {
+			navigator.vibrate(30);
+		} catch {
+			// noop
+		}
+	}
 }
 
-function onDragover(ev: DragEvent, item: T, backward: boolean) {
-	nextTick(() => {
-		dropReadyArea.value = [item.id, backward ? 'backward' : 'forward'];
-	});
-}
+function onPointerMove(ev: PointerEvent) {
+	if (pending == null || ev.pointerId !== pending.pointerId) return;
+
+	if (!dragActive) {
+		const dx = Math.abs(ev.clientX - pending.x);
+		const dy = Math.abs(ev.clientY - pending.y);
+		const moved = dx > MOVE_THRESHOLD_PX || dy > MOVE_THRESHOLD_PX;
+		if (!moved) return;
+
+		if (pending.pointerType === 'touch') {
+			// 長押し成立前に動いたら通常スクロールに譲る (タッチのみ)
+			cleanup();
+		} else {
+			// mouse / pen: 動き出した瞬間がドラッグ開始トリガー。
+			// 動かさず pointerup (=click) は dragActive=false のまま素通し。
+			startDrag();
+		}
+		return;
+	}
 
-function onDragleave(ev: DragEvent, item: T) {
-	dropReadyArea.value = [null, null];
-}
+	// drag 中
+	if (pending.pointerType === 'touch') {
+		// タッチ時のみ、スクロールへの誤伝播を防ぐため preventDefault。
+		// mouse / pen は元々スクロールジェスチャを持たないので不要。
+		ev.preventDefault();
+	}
 
-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);
+	if (ghostEl != null) {
+		const dx = ev.clientX - pending.x;
+		const dy = ev.clientY - pending.y;
+		ghostEl.style.transform = `translate(${dx}px, ${dy}px)`;
+	}
 
-	const fromIndex = props.modelValue.findIndex(x => x.id === dragged.item.id);
-	let toIndex = props.modelValue.findIndex(x => x.id === item.id);
+	// elementFromPoint で実際のドロップターゲットを判定 (ghostは一時的に隠す)
+	const prevDisplay = ghostEl?.style.display ?? '';
+	if (ghostEl != null) ghostEl.style.display = 'none';
+	const el = window.document.elementFromPoint(ev.clientX, ev.clientY) as HTMLElement | null;
+	if (ghostEl != null) ghostEl.style.display = prevDisplay;
 
-	const newValue = [...props.modelValue];
-	if (fromIndex > -1) newValue.splice(fromIndex, 1);
-	toIndex = newValue.findIndex(x => x.id === item.id);
-	if (backward) toIndex += 1;
-	newValue.splice(toIndex, 0, dragged.item as T);
+	if (el == null) {
+		dropTarget.value = null;
+		return;
+	}
 
-	emit('update:modelValue', newValue);
+	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')) {
+			dropTarget.value = { instanceId: targetInstanceId, itemId: targetItemId, area };
+			return;
+		}
+	}
+	dropTarget.value = null;
 }
 
-function onEmptyDrop(ev: DragEvent) {
-	const dragged = getDragData(ev, 'MkDraggable');
-	if (dragged == null) return;
-	dropCallback?.(instanceId);
+function onPointerUp(ev: PointerEvent) {
+	if (pending == null || ev.pointerId !== pending.pointerId) return;
 
-	emit('update:modelValue', [dragged.item as T]);
+	if (!dragActive) {
+		// tap (動かさず離した) のケース: click 合成を妨げないようそのまま終了
+		cleanup();
+		return;
+	}
+
+	const target = dropTarget.value;
+	const session = dragSession;
+
+	if (session != null && target != null) {
+		const handler = dropHandlers.get(target.instanceId);
+		if (handler != null) {
+			// target 側で処理が成立した (group 一致等) 場合のみ source から削除
+			const accepted = handler(session.item, session.group, target.itemId, target.area === 'backward');
+			if (accepted && target.instanceId !== instanceId) {
+				removeSourceCallback?.();
+			}
+		}
+	} else if (session != null) {
+		// emptyDropArea にドロップしたか確認
+		const prevDisplay = ghostEl?.style.display ?? '';
+		if (ghostEl != null) ghostEl.style.display = 'none';
+		const el = window.document.elementFromPoint(ev.clientX, ev.clientY) as HTMLElement | null;
+		if (ghostEl != null) ghostEl.style.display = prevDisplay;
+		const emptyEl = el?.closest<HTMLElement>('[data-mk-draggable-empty-instance-id]');
+		if (emptyEl != null) {
+			const targetInstanceId = emptyEl.dataset.mkDraggableEmptyInstanceId;
+			if (targetInstanceId != null) {
+				const handler = emptyDropHandlers.get(targetInstanceId);
+				if (handler != null) {
+					const accepted = handler(session.item, session.group);
+					if (accepted && targetInstanceId !== instanceId) {
+						removeSourceCallback?.();
+					}
+				}
+			}
+		}
+	}
+
+	cleanup();
+}
+
+function onPointerCancel(ev: PointerEvent) {
+	if (pending == null || ev.pointerId !== pending.pointerId) return;
+	cleanup();
 }
+
+// ---------- registry ----------
+
+dropHandlers.set(instanceId, (draggedItem, sourceGroup, targetItemId, backward) => {
+	return applyDrop(draggedItem as T, sourceGroup, targetItemId, backward);
+});
+emptyDropHandlers.set(instanceId, (draggedItem, sourceGroup) => {
+	if (sourceGroup !== group) return false;
+	emit('update:modelValue', [draggedItem as T]);
+	return true;
+});
+
+onBeforeUnmount(() => {
+	dropHandlers.delete(instanceId);
+	emptyDropHandlers.delete(instanceId);
+	// 自インスタンスがドラッグ中 / 待機中だった場合はリスナーリーク防止のため cleanup
+	if (dragSession?.instanceId === instanceId || pending != null) {
+		cleanup();
+	}
+});
 </script>
 
 <style lang="scss" module>
@@ -182,6 +499,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/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
index 8444f876648..3762b647442 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" :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' };
 }>();
 

From 7413bc9bc24c35ffbef4d7c517ca0caab204c6e6 Mon Sep 17 00:00:00 2001
From: fruitriin <nassii74@gmail.com>
Date: Wed, 3 Jun 2026 15:35:28 +0900
Subject: [PATCH 2/3] =?UTF-8?q?enhance(frontend):=20MkDraggable=20?=
 =?UTF-8?q?=E5=88=A9=E7=94=A8=E5=81=B4=E3=82=92=20Pointer=20Events=20?=
 =?UTF-8?q?=E9=85=8D=E7=B7=9A=E3=81=AB=E8=BF=BD=E5=BE=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

MkDraggable の Pointer Events 化に合わせて、ドラッグハンドルを持つ呼び出し
側 (RolesEditorFormula / server-rules / channel-editor / navbar / profile /
page-editor 各種) を dragStart/dragStartCallback から pointerStart/
pointerStartCallback に切り替え、ハンドル要素に touch-action: none を付与。
不要となった drag-and-drop.ts の MkDraggable DragDataMap エントリも削除。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                          |  1 +
 packages/frontend/src/drag-and-drop.ts                |  1 -
 .../frontend/src/pages/admin/RolesEditorFormula.vue   | 11 +++++++----
 packages/frontend/src/pages/admin/server-rules.vue    |  6 ++++--
 packages/frontend/src/pages/channel-editor.vue        |  6 ++++--
 packages/frontend/src/pages/page-editor/common.ts     |  2 +-
 .../pages/page-editor/els/page-editor.el.image.vue    |  4 ++--
 .../pages/page-editor/els/page-editor.el.section.vue  |  4 ++--
 .../src/pages/page-editor/els/page-editor.el.text.vue |  4 ++--
 .../src/pages/page-editor/page-editor.blocks.vue      |  6 +++---
 .../src/pages/page-editor/page-editor.container.vue   |  6 ++++--
 packages/frontend/src/pages/settings/navbar.vue       |  6 ++++--
 packages/frontend/src/pages/settings/profile.vue      |  6 ++++--
 13 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d084006562c..14e42419475 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: リモートノートクリーニングジョブのスキップ処理のパフォーマンス改善
diff --git a/packages/frontend/src/drag-and-drop.ts b/packages/frontend/src/drag-and-drop.ts
index 725e7a70b38..670912241ec 100644
--- 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
index 384282262d3..4e8a810576b 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" @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
index 02aad732f65..027fe3442ed 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, 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
index fce69aad796..5c7b3141948 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, 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
index 64cd9cde7a1..801e6625112 100644
--- 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
index 440daa65881..b07478b8a6b 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" :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.section.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
index 53317390b37..d2df05f040a 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" :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
index 9fb7b7425be..45a755c8456 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" :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
index 4fd05b475c5..e46d3fd771e 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,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
index 6e2d500d96f..bfa95e2a929 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" @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
index a2fab68e413..cb01769d9a8 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, 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
index 966a1309552..cdec1816c63 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, 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;

From 6c6834a886b79d27542cc1a84b8dac690888ae2e Mon Sep 17 00:00:00 2001
From: fruitriin <nassii74@gmail.com>
Date: Wed, 3 Jun 2026 15:42:33 +0900
Subject: [PATCH 3/3] fix doc

---
 packages/frontend/src/components/MkDraggable.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkDraggable.vue b/packages/frontend/src/components/MkDraggable.vue
index 760195eff08..8064008aca3 100644
--- a/packages/frontend/src/components/MkDraggable.vue
+++ b/packages/frontend/src/components/MkDraggable.vue
@@ -73,10 +73,12 @@ import { genId } from '@/utility/id.js';
 /**
  * default スロットの `pointerStart` を `manualDragStart=true` のハンドル要素に配線する場合、
  * そのハンドル要素には CSS で `touch-action: none` を指定すること。
- * Pointer Events 仕様 (§11.1) によりブラウザは pointerdown の瞬間にジェスチャ判定を確定する
+ * Pointer Events 仕様 (*1) によりブラウザは pointerdown の瞬間にジェスチャ判定を確定する
  * ため、JS から後で touch-action を書き換えても間に合わない。touch-action: none を予め
  * 指定しておかないと、ハンドルを掴んでから指を縦に動かした瞬間にブラウザがスクロール
  * ジェスチャを始めて pointercancel を投げてくる。
+ *
+ * *1 https://www.w3.org/TR/pointerevents3/#determining-supported-direct-manipulation-behavior
  */
 const slots = defineSlots<{
 	default(props: { item: T; index: number; pointerStart: (ev: PointerEvent) => void }): any;