Введение

Vue DnD Kit — это drag and drop для Vue 3. Сортируемые списки, канбан-доски, деревья, мульти-драг, копирование и зоны сброса — с анимациями, поддержкой клавиатуры и озвучиванием для скринридеров из коробки, в вашей собственной разметке.

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

<template>
  <DnDProvider>
    <Trip />
  </DnDProvider>
</template>

Ни для чего из этого у демо нет собственного кода: списки перестраиваются вживую, колонки обмениваются остановками (одна group), выделение едет вместе (selected), Alt превращает перемещение в копирование (clone), а клавиатура делает всё это по слотам. Демо рендерит остановки и передаёт несколько опций.

Что это

Набор композаблов и один компонент-провайдер. Вы рендерите свои элементы и передаёте их template ref в композаблы, а остальное делает библиотека: ввод указателем, касанием и с клавиатуры, поиск цели, пересортировку, анимации, автоскролл и сообщения скринридерам о том, что произошло.

<script setup lang="ts">
const listRef = useTemplateRef<HTMLElement>('list');
// `items` is the draft: it reorders while you drag. On drop, `day.stops` gets the new order.
const { items } = makeSortableList(listRef, { items: toRef(props.day, 'stops'), group: 'trip' });
</script>

<template>
  <ul ref="list">
    <StopCard v-for="stop in items" :key="stop.id" :stop="stop" />
  </ul>
</template>

Сама библиотека не рендерит ничего, кроме плавающего оверлея — по умолчанию это клон перетаскиваемого элемента. Разметка и стили остаются вашими: библиотека добавляет ARIA-атрибуты и несколько атрибутов data-dnd-*, чтобы стилизовать состояния драга.

Что вы получаете

• Сортируемые списки и сетки, которые перестраиваются прямо во время драга: вертикальные, горизонтальные или в виде сетки.
• Списки с общими элементами: канбан-доски, палитры, которые раздают копии, обмен местами, правила, что куда можно класть.
• Деревья: вложение драгом вбок или наведением на строку, ограничение глубины и правила.
• Мульти-драг с вашим собственным выделением (Ctrl/Cmd-клик, рамка): блок перемещается целиком.
• Зоны сброса с правилами приёма и броски, которые вы подтверждаете, отклоняете или применяете сами.
• Анимации по умолчанию: элементы плавно встают на новые места, бросок приземляется на свой слот, отмена летит обратно.
• Доступность: перетаскивание с клавиатуры по слотам, озвучивание на лету, ARIA-атрибуты.
• Виртуальные списки с TanStack Virtual или VueUse: тысячи строк.
• Сенсоры и действия: ваши собственные устройства ввода и драги, заданные из кода.
• DevTools: вкладка с живой картой каждого списка, джойстиком и журналом каждого драга.

Чем он отличается

• Ваши данные остаются вашими до броска. Вы рендерите черновик своего массива. Во время драга двигается только черновик; при броске библиотека записывает новый порядок в ваш ref или отдаёт вам e.result, чтобы вы применили его сами (сторы, серверы, отмена).
• Никаких компонентов-обёрток. Строки — это ваши элементы, с ref и одним вызовом, поэтому компоненты UI-кита (Nuxt UI, Vuetify, ваш собственный) перетаскиваются как есть.
• Анимации по умолчанию, которые не мешают. Перестановки, приземления и отмены анимируются из коробки; выключите их, настройте или передайте GSAP или motion.
• Клавиатура — не запоздалая мысль. Любой драг можно сделать клавишей Space и стрелками, перемещения озвучиваются, а фокус возвращается туда, где был.
• Один провайдер на всё приложение. Области дают частям страницы собственные правила (ось, границы, сетку, более долгое нажатие), так что вложенным функциям не нужны вложенные провайдеры.
• Ввод подключаемый. Указатель и клавиатура — это сенсоры; напишите свой для геймпада или голосовой команды или перемещайте элементы из кода через @vue-dnd-kit/actions.

Как всё устроено

Требования

• Vue 3.5 или новее.
• Современные браузеры: Chrome и Edge 104+, Safari 15.4+, Firefox 104+.
• Работает с SSR и Nuxt: оверлей и live-регион монтируются на клиенте.

Дальше: установите её, затем соберите первый список в Быстром старте.