revert: use sortablejs-vue3 instead of vuedraggable for more stability

2 files changed, 8 insertions, 21 deletions

diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 44833db460..955d835f25 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-show="props.modelValue.length != 0" class="skeikyzd">
-	<Sortable :list="props.modelValue" class="files" item-key="id" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
+	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:modelValue="v => emit('update:modelValue', v)">
 		<template #item="{element}">
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, watch } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 import { deepClone } from '@/scripts/clone';
 import { i18n } from '@/i18n';
 
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	modelValue: any[];
@@ -37,13 +37,6 @@ const emit = defineEmits<{
 
 let menuShowing = false;
 
-function onSorted(event) {
-	const items = deepClone(props.modelValue);
-	const item = items.splice(event.oldIndex, 1)[0];
-	items.splice(event.newIndex, 0, item);
-	emit('update:modelValue', items);
-}
-
 function detachMedia(id) {
 	if (props.detachMediaFn) {
 		props.detachMediaFn(id);
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 17ffc8eb10..5299b581b5 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -10,10 +10,11 @@
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<Sortable
-			:list="props.widgets"
+			:model-value="props.widgets"
 			item-key="id"
-			:options="{ handle: '.handle', animation: 150 }"
-			@end="onSorted"
+			handle=".handle"
+			:animation="150"
+			@update:modelValue="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
 				<div class="customize-container">
@@ -40,7 +41,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { deepClone } from '@/scripts/clone';
 
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 type Widget = {
 	name: string;
@@ -84,13 +85,6 @@ const updateWidget = (id, data) => {
 	emit('updateWidget', { id, data });
 };
 
-function onSorted(event) {
-	const items = deepClone(props.widgets);
-	const item = items.splice(event.oldIndex, 1)[0];
-	items.splice(event.newIndex, 0, item);
-	emit('updateWidgets', items);
-}
-
 function onContextmenu(widget: Widget, ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;