vue-dnd-kit

Документация/Начало работы

Быстрый старт

Сортируемый список в трёх файлах — провайдер, список и его строки.

Редактировать страницу

Страница переведена ИИ и может содержать неточности. Читать английский оригинал

Вот всё целиком, и оно уже работает. Перетащите строку — или перейдите к ней клавишей Tab, нажмите Space, передвиньте её стрелками и снова нажмите Space.

Live

Загружаем демо…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TaskList from './TaskList.vue';
</script>

<template>
  <!-- The provider goes around the components that drag (often the whole app). -->
  <DnDProvider>
    <TaskList />
  </DnDProvider>
</template>

По шагам

Оберните приложение в провайдер

DnDProvider отвечает за драг. Любой композабл должен вызываться в компоненте, который отрендерен внутри провайдера, — а не в том, чей шаблон его содержит.

Сделайте список

makeSortableList принимает элемент списка и ваш массив. Он возвращает items — черновик, который перестраивается прямо во время драга. Рендерите черновик, а не свой массив, и задавайте строкам ключи по id.

Сделайте строки

Каждая строка вызывает makeSortableItem со своим элементом и элементом данных, который она рендерит. Её ключ берётся из item.id.

Когда бросок завершается, tasks получает новый порядок. Это обычный ref, поэтому остальное приложение видит изменение, как и любое другое.

Используете Pinia, сервер или иммутабельные данные? Передайте геттер вместо ref, затем вызовите e.preventDefault() в onDrop и примените e.result сами.