enhance(frontend): remove vuedraggable (#17073)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update page-editor.blocks.vue

* Update MkDraggable.vue

* refactor

* refactor

* ✌️

* refactor

* Update MkDraggable.vue

* ios

* 🎨

* 🎨

1 files changed, 24 insertions, 11 deletions

diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.vue b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
index 9d9db9158d..9eeedd5c1d 100644
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.vue
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.header">
 		<MkSelect v-model="type" :items="typeDef" :class="$style.typeSelect">
 		</MkSelect>
-		<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle">
+		<button v-if="draggable" class="_button" :class="$style.dragHandle" :draggable="true" @dragstart.stop="dragStartCallback">
 			<i class="ti ti-menu-2"></i>
 		</button>
 		<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf">
@@ -17,14 +17,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 
 	<div v-if="type === 'and' || type === 'or'" class="_gaps">
-		<Sortable v-model="v.values" tag="div" class="_gaps" itemKey="id" handle=".drag-handle" :group="{ name: 'roleFormula' }" :animation="150" :swapThreshold="0.5">
-			<template #item="{element}">
+		<MkDraggable
+			v-model="v.values"
+			direction="vertical"
+			withGaps
+			canNest
+			manualDragStart
+			group="roleFormula"
+		>
+			<template #default="{ item, dragStart }">
 				<div :class="$style.item">
 					<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
-					<RolesEditorFormula :modelValue="element" draggable @update:modelValue="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
+					<RolesEditorFormula
+						:modelValue="item"
+						:dragStartCallback="dragStart"
+						draggable
+						@update:modelValue="updated => valuesItemUpdated(updated)"
+						@remove="removeItem(item.id)"
+					/>
 				</div>
 			</template>
-		</Sortable>
+		</MkDraggable>
 		<MkButton rounded style="margin: 0 auto;" @click="addValue"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 	</div>
 
@@ -45,18 +58,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import type { GetMkSelectValueTypesFromDef, MkSelectItem } from '@/components/MkSelect.vue';
 import { genId } from '@/utility/id.js';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
-import type { GetMkSelectValueTypesFromDef, MkSelectItem } from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkDraggable from '@/components/MkDraggable.vue';
 import { i18n } from '@/i18n.js';
 import { deepClone } from '@/utility/clone.js';
 import { rolesCache } from '@/cache.js';
 
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 	(ev: 'remove'): void;
@@ -65,6 +77,7 @@ const emit = defineEmits<{
 const props = defineProps<{
 	modelValue: any;
 	draggable?: boolean;
+	dragStartCallback?: (ev: DragEvent) => void;
 }>();
 
 const v = ref(deepClone(props.modelValue));
@@ -132,8 +145,8 @@ function valuesItemUpdated(item) {
 	v.value.values[i] = item;
 }
 
-function removeItem(item) {
-	v.value.values = v.value.values.filter(_item => _item.id !== item.id);
+function removeItem(itemId) {
+	v.value.values = v.value.values.filter(_item => _item.id !== itemId);
 }
 
 function removeSelf() {