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

This commit is contained in:
syuilo 2022-12-21 15:10:21 +09:00
parent b71d26fbca
commit 5cac199710
7 changed files with 31 additions and 55 deletions

View file

@ -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;