From c02fe955ccb5da147a4c5989fe9ddeb59d38ef42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 22 May 2026 08:55:55 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=89=E3=83=A9=E3=83=83?=
 =?UTF-8?q?=E3=82=B0=E3=83=8F=E3=83=B3=E3=83=89=E3=83=AB=E3=81=8C=E3=81=82?=
 =?UTF-8?q?=E3=82=8B=E3=81=AE=E3=81=AB=E8=A8=AD=E5=AE=9A=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E3=83=89=E3=83=A9=E3=83=83?=
 =?UTF-8?q?=E3=82=B0UI=E3=82=92=E4=BF=AE=E6=AD=A3=20(#17472)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/channel-editor.vue     |  5 +++--
 .../pages/page-editor/els/page-editor.el.image.vue |  3 ++-
 .../pages/page-editor/els/page-editor.el.note.vue  |  3 ++-
 .../page-editor/els/page-editor.el.section.vue     |  3 ++-
 .../pages/page-editor/els/page-editor.el.text.vue  |  3 ++-
 .../src/pages/page-editor/page-editor.blocks.vue   | 14 +++++++++++---
 .../pages/page-editor/page-editor.container.vue    |  3 ++-
 packages/frontend/src/pages/settings/navbar.vue    |  5 +++--
 8 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
index 4b73b6c6b3..fce69aad79 100644
--- a/packages/frontend/src/pages/channel-editor.vue
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -44,11 +44,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkDraggable
 						:modelValue="pinnedNoteIds.map(id => ({ id }))"
 						direction="vertical"
+						manualDragStart
 						@update:modelValue="v => pinnedNoteIds = v.map(x => x.id)"
 					>
-						<template #default="{ item }">
+						<template #default="{ item, dragStart }">
 							<div :class="$style.pinnedNote">
-								<button class="_button" :class="$style.pinnedNoteHandle"><i class="ti ti-menu"></i></button>
+								<button class="_button" :class="$style.pinnedNoteHandle" tabindex="-1" :draggable="true" @dragstart.stop="dragStart"><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 13dedeafb2..440daa6588 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" @remove="() => emit('remove')">
+<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-photo"></i> {{ i18n.ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
@@ -30,6 +30,7 @@ import { i18n } from '@/i18n.js';
 import { chooseDriveFile } from '@/utility/drive.js';
 
 const props = defineProps<{
+	dragStartCallback?: (ev: DragEvent) => 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 e596b31b43..8444f87664 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" @remove="() => emit('remove')">
+<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ i18n.ts._pages.blocks.note }}</template>
 
 	<section style="padding: 16px;" class="_gaps_s">
@@ -34,6 +34,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
+	dragStartCallback?: (ev: DragEvent) => 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 2d239bd699..53317390b3 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" @remove="() => emit('remove')">
+<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
@@ -35,6 +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;
 	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 079a28491b..9fb7b7425b 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" @remove="() => emit('remove')">
+<XContainer :draggable="true" :dragStartCallback="dragStartCallback" @remove="() => emit('remove')">
 	<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section>
@@ -22,6 +22,7 @@ import { i18n } from '@/i18n.js';
 import { Autocomplete } from '@/utility/autocomplete.js';
 
 const props = defineProps<{
+	dragStartCallback?: (ev: DragEvent) => 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 18f6c40013..4fd05b475c 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -9,19 +9,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 	direction="vertical"
 	withGaps
 	canNest
+	manualDragStart
 	group="pageBlocks"
 	@update:modelValue="v => emit('update:modelValue', v)"
 >
-	<template #default="{ item }">
+	<template #default="{ item, dragStart }">
 		<div>
 			<!-- divが無いとエラーになる -->
-			<component :is="getComponent(item.type) as any" :modelValue="item" @update:modelValue="updateItem" @remove="() => removeItem(item)"/>
+			<component
+				:is="getComponent(item.type)"
+				:modelValue="item"
+				:dragStartCallback="dragStart"
+				@update:modelValue="updateItem"
+				@remove="() => removeItem(item)"
+			/>
 		</div>
 	</template>
 </MkDraggable>
 </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';
@@ -29,7 +37,7 @@ import XImage from './els/page-editor.el.image.vue';
 import XNote from './els/page-editor.el.note.vue';
 import MkDraggable from '@/components/MkDraggable.vue';
 
-function getComponent(type: Misskey.entities.Page['content'][number]['type']) {
+function getComponent(type: Misskey.entities.Page['content'][number]['type']): Component {
 	switch (type) {
 		case 'section': return XSection;
 		case 'text': return XText;
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 936a7462dd..6e2d500d96 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">
+			<button v-if="draggable" class="drag-handle _button" tabindex="-1" :draggable="true" @dragstart.stop="dragStartCallback">
 				<i class="ti ti-menu-2"></i>
 			</button>
 			<button class="_button" @click="toggleContent(!showBody)">
@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<{
 	expanded?: boolean;
 	removable?: boolean;
 	draggable?: boolean;
+	dragStartCallback?: (ev: DragEvent) => void;
 }>(), {
 	expanded: true,
 	removable: true,
diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
index 997a9f00c2..a2fab68e41 100644
--- a/packages/frontend/src/pages/settings/navbar.vue
+++ b/packages/frontend/src/pages/settings/navbar.vue
@@ -12,13 +12,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkDraggable
 					v-model="items"
 					direction="vertical"
+					manualDragStart
 				>
-					<template #default="{ item }">
+					<template #default="{ item, dragStart }">
 						<div
 							v-if="item.type === '-' || navbarItemDef[item.type]"
 							:class="$style.item"
 						>
-							<button class="_button" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
+							<button class="_button" :class="$style.itemHandle" tabindex="-1" :draggable="true" @dragstart.stop="dragStart"><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>