MisskeyPagesで変数を並べ替えられるように

2 files changed, 20 insertions, 16 deletions

diff --git a/src/client/app/common/views/components/page-editor/page-editor.script-block.vue b/src/client/app/common/views/components/page-editor/page-editor.script-block.vue
index 41ca8ed09a..faecaf61fa 100644
--- a/src/client/app/common/views/components/page-editor/page-editor.script-block.vue
+++ b/src/client/app/common/views/components/page-editor/page-editor.script-block.vue
@@ -1,5 +1,5 @@
 <template>
-<x-container :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn">
+<x-container :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
 	<template #header><fa v-if="icon" :icon="icon"/> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
 	<template #func>
 		<button @click="changeType()">
@@ -93,6 +93,10 @@ export default Vue.extend({
 		fnSlots: {
 			required: false,
 		},
+		draggable: {
+			required: false,
+			default: false
+		}
 	},
 
 	data() {
diff --git a/src/client/app/common/views/components/page-editor/page-editor.vue b/src/client/app/common/views/components/page-editor/page-editor.vue
index a3c21322af..a3f69ea5c3 100644
--- a/src/client/app/common/views/components/page-editor/page-editor.vue
+++ b/src/client/app/common/views/components/page-editor/page-editor.vue
@@ -53,20 +53,19 @@
 	<ui-container :body-togglable="true">
 		<template #header><fa :icon="faMagic"/> {{ $t('variables') }}</template>
 		<div class="qmuvgica">
-			<div class="variables" v-show="variables.length > 0">
-				<template v-for="variable in variables">
-					<x-variable
-						:value="variable"
-						:removable="true"
-						@input="v => updateVariable(v)"
-						@remove="() => removeVariable(variable)"
-						:key="variable.name"
-						:ai-script="aiScript"
-						:name="variable.name"
-						:title="variable.name"
-					/>
-				</template>
-			</div>
+			<x-draggable tag="div" class="variables" v-show="variables.length > 0" :list="variables" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+				<x-variable v-for="variable in variables"
+					:value="variable"
+					:removable="true"
+					@input="v => updateVariable(v)"
+					@remove="() => removeVariable(variable)"
+					:key="variable.name"
+					:ai-script="aiScript"
+					:name="variable.name"
+					:title="variable.name"
+					:draggable="true"
+				/>
+			</x-draggable>
 
 			<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
 
@@ -92,6 +91,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
 import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../../../../i18n';
@@ -107,7 +107,7 @@ export default Vue.extend({
 	i18n: i18n('pages'),
 
 	components: {
-		XVariable, XBlocks
+		XDraggable, XVariable, XBlocks
 	},
 
 	props: {