From 856b1fa6c1fb9d8ad9830a9ab56f600b35d540ab Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 2 Sep 2024 01:01:39 +0900
Subject: [PATCH] fix

---
 .../pages/page-editor/page-editor.blocks.vue  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

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 d661baebc7..85ba7d4e05 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -12,10 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
+import { watch, computed, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { animations } from '@formkit/drag-and-drop';
-import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
+import { dragAndDrop } from '@formkit/drag-and-drop/vue';
 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';
@@ -39,10 +39,23 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: Misskey.entities.PageBlock[]): void;
 }>();
 
-const [dndParentEl, items] = useDragAndDrop(props.modelValue, {
+const items = computed({
+	get: () => props.modelValue,
+	set: (v) => emit('update:modelValue', v),
+});
+
+const dndParentEl = shallowRef<HTMLElement>();
+
+dragAndDrop({
+	parent: dndParentEl,
+	values: items,
 	dragHandle: '.drag-handle',
 	group: 'blocks',
 	plugins: [animations()],
+	threshold: {
+		horizontal: 0.5,
+		vertical: 0.5,
+	},
 });
 
 watch(items, (v) => {