This commit is contained in:
kakkokari-gtyih 2024-09-02 01:01:39 +09:00
parent 3f4f215cf3
commit 856b1fa6c1
1 changed files with 16 additions and 3 deletions

View File

@ -12,10 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { watch } from 'vue'; import { watch, computed, shallowRef } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { animations } from '@formkit/drag-and-drop'; import { animations } from '@formkit/drag-and-drop';
import { useDragAndDrop } from '@formkit/drag-and-drop/vue'; import { dragAndDrop } from '@formkit/drag-and-drop/vue';
import XSection from './els/page-editor.el.section.vue'; import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue'; import XText from './els/page-editor.el.text.vue';
import XImage from './els/page-editor.el.image.vue'; import XImage from './els/page-editor.el.image.vue';
@ -39,10 +39,23 @@ const emit = defineEmits<{
(ev: 'update:modelValue', value: Misskey.entities.PageBlock[]): void; (ev: 'update:modelValue', value: Misskey.entities.PageBlock[]): void;
}>(); }>();
const [dndParentEl, items] = useDragAndDrop(props.modelValue, { const items = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
const dndParentEl = shallowRef<HTMLElement>();
dragAndDrop({
parent: dndParentEl,
values: items,
dragHandle: '.drag-handle', dragHandle: '.drag-handle',
group: 'blocks', group: 'blocks',
plugins: [animations()], plugins: [animations()],
threshold: {
horizontal: 0.5,
vertical: 0.5,
},
}); });
watch(items, (v) => { watch(items, (v) => {