Use vuedraggable instead of vue-draggable-next

Fix #6852

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

@@ -1,6 +1,8 @@
 <template>
-<XDraggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @update:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
+<XDraggable tag="div" v-model="blocks" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+	<template #item="{element}">
+		<component :is="'x-' + element.type" :value="element" @update:value="updateItem" @remove="() => removeItem(element)" :hpml="hpml"/>
+	</template>
 </XDraggable>
 </template>
 
@@ -25,7 +27,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
 	},
 
@@ -39,9 +41,16 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['update:value'],
+
 	computed: {
-		blocks() {
-			return this.value;
+		blocks: {
+			get() {
+				return this.value;
+			},
+			set(value) {
+				this.$emit('update:value', value);
+			}
 		}
 	},
 
@@ -57,6 +66,7 @@ export default defineComponent({
 		},
 
 		removeItem(el) {
+			console.log(el);
 			const i = this.blocks.findIndex(x => x.id === el.id);
 			const newValue = [
 				...this.blocks.slice(0, i),

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

@@ -52,6 +52,7 @@ export default defineComponent({
 			default: null
 		}
 	},
+	emits: ['toggle', 'remove'],
 	data() {
 		return {
 			showBody: this.expanded,

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

@@ -53,18 +53,19 @@
 		<MkContainer :body-togglable="true" class="_vMargin">
 			<template #header><Fa :icon="faMagic"/> {{ $t('_pages.variables') }}</template>
 			<div class="qmuvgica">
-				<XDraggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<XVariable v-for="variable in variables"
-						:value="variable"
-						:removable="true"
-						@update:value="v => updateVariable(v)"
-						@remove="() => removeVariable(variable)"
-						:key="variable.name"
-						:hpml="hpml"
-						:name="variable.name"
-						:title="variable.name"
-						:draggable="true"
-					/>
+				<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+					<template #item="{element}">
+						<XVariable
+							:value="element"
+							:removable="true"
+							@update:value="v => updateVariable(v)"
+							@remove="() => removeVariable(element)"
+							:hpml="hpml"
+							:name="element.name"
+							:title="element.name"
+							:draggable="true"
+						/>
+					</template>
 				</XDraggable>
 
 				<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
@@ -109,7 +110,7 @@ import { selectFile } from '@/scripts/select-file';
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput,
 	},