use sortablejs-vue3 instead of vuedraggable for more stability

packages/client/src/pages/page-editor/page-editor.blocks.vue

@@ -1,9 +1,9 @@
 <template>
-<XDraggable v-model="blocks" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+<Sortable :list="blocks" tag="div" item-key="id" :options="{ handle: '.drag-handle', group: { name: 'blocks' }, animation: 150, swapThreshold: 0.5 }">
 	<template #item="{element}">
 		<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
 	</template>
-</XDraggable>
+</Sortable>
 </template>
 
 <script lang="ts">
@@ -27,14 +27,14 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
+		Sortable: defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)),
+		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
 	},
 
 	props: {
 		modelValue: {
 			type: Array,
-			required: true
+			required: true,
 		},
 		hpml: {
 			required: true,
@@ -50,8 +50,8 @@ export default defineComponent({
 			},
 			set(value) {
 				this.$emit('update:modelValue', value);
-			}
-		}
+			},
+		},
 	},
 
 	methods: {
@@ -60,7 +60,7 @@ export default defineComponent({
 			const newValue = [
 				...this.blocks.slice(0, i),
 				v,
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
 			this.$emit('update:modelValue', newValue);
 		},
@@ -69,10 +69,10 @@ export default defineComponent({
 			const i = this.blocks.findIndex(x => x.id === el.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
 			this.$emit('update:modelValue', newValue);
 		},
-	}
+	},
 });
 </script>

packages/client/src/pages/page-editor/page-editor.vue

@@ -54,7 +54,7 @@
 
 		<div v-else-if="tab === 'variables'">
 			<div class="qmuvgica">
-				<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+				<Sortable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
 					<template #item="{element}">
 						<XVariable
 							:model-value="element"
@@ -66,7 +66,7 @@
 							@remove="() => removeVariable(element)"
 						/>
 					</template>
-				</XDraggable>
+				</Sortable>
 
 				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ti ti-plus"></i></MkButton>
 			</div>
@@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default));
 
 const props = defineProps<{
 	initPageId?: string;
@@ -186,24 +186,24 @@ function save() {
 	if (pageId) {
 		options.pageId = pageId;
 		os.api('pages/update', options)
-		.then(page => {
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.updated,
-			});
-		}).catch(onError);
+			.then(page => {
+				currentName = name.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.updated,
+				});
+			}).catch(onError);
 	} else {
 		os.api('pages/create', options)
-		.then(created => {
-			pageId = created.id;
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.created,
-			});
-			mainRouter.push(`/pages/edit/${pageId}`);
-		}).catch(onError);
+			.then(created => {
+				pageId = created.id;
+				currentName = name.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.created,
+				});
+				mainRouter.push(`/pages/edit/${pageId}`);
+			}).catch(onError);
 	}
 }
 
@@ -438,7 +438,7 @@ definePageMetadata(computed(() => {
 	return {
 		title: title,
 		icon: 'ti ti-pencil',
-		};
+	};
 }));
 </script>
 

packages/client/src/pages/settings/reaction.vue

@@ -3,7 +3,7 @@
 	<FromSlot class="_formBlock">
 		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
 		<div v-panel style="border-radius: 6px;">
-			<XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
+			<Sortable :list="reactions" class="zoaiodol" :item-key="item => item" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
 						<MkEmoji :emoji="element" :normal="true"/>
@@ -12,7 +12,9 @@
 				<template #footer>
 					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 				</template>
-			</XDraggable>
+			</Sortable>
+			<!-- TODO: https://github.com/MaxLeiter/sortablejs-vue3/issues/52 が実装されたら消す -->
+			<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 		</div>
 		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
 	</FromSlot>
@@ -55,7 +57,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, watch } from 'vue';
-import XDraggable from 'vuedraggable';
+import { Sortable } from 'sortablejs-vue3';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FromSlot from '@/components/form/slot.vue';
@@ -75,6 +77,11 @@ const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPic
 const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
 const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
 
+function onSorted(event) {
+	const item = reactions.splice(event.oldIndex, 1)[0];
+	reactions.splice(event.newIndex, 0, item);
+}
+
 function save() {
 	defaultStore.set('reactions', reactions);
 }