---
title: "Введение"
description: "Vue DnD Kit — drag and drop для Vue 3. Сортируемые списки, канбан-доски, деревья, мульти-драг и зоны сброса — с анимациями и доступностью из коробки."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/ru/docs/getting-started/introduction"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

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

<example height="27rem" hint="Переносите остановки между днями; чипы ниже называют остальные жесты" name="at-a-glance" title="Вкратце">



</example>

Ни для чего из этого у демо нет собственного кода: списки перестраиваются вживую, колонки обмениваются
остановками (одна `group`), выделение едет вместе (`selected`), <kbd value="Alt">



</kbd>

 превращает
перемещение в копирование (`clone`), а клавиатура делает всё это по слотам. Демо рендерит
остановки и передаёт несколько опций.

## Что это

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

```vue [Day.vue]
<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.
- **Клавиатура — не запоздалая мысль.** Любой драг можно сделать клавишей <kbd value="Space">



</kbd>

 и
стрелками, перемещения озвучиваются, а фокус возвращается туда, где был.
- **Один провайдер на всё приложение.** Области дают частям страницы собственные правила (ось,
границы, сетку, более долгое нажатие), так что вложенным функциям не нужны вложенные
провайдеры.
- **Ввод подключаемый.** Указатель и клавиатура — это сенсоры; напишите свой для геймпада или
голосовой команды или перемещайте элементы из кода через `@vue-dnd-kit/actions`.

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

<table>
<thead>
  <tr>
    <th>
      Часть
    </th>
    
    <th>
      Что делает
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        DnDProvider
      </code>
    </td>
    
    <td>
      Отвечает за драг: ввод, оверлей, выделение, автоскролл, озвучивание.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSortableList
      </code>
      
       / <code>
        makeSortableItem
      </code>
    </td>
    
    <td>
      Список, который сортируется, и его строки.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSortableTree
      </code>
    </td>
    
    <td>
      Дерево, отрисованное плоским списком с глубинами.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeDraggable
      </code>
      
       / <code>
        makeDroppable
      </code>
    </td>
    
    <td>
      Свободное перетаскивание и зоны сброса.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeDragArea
      </code>
    </td>
    
    <td>
      Правила для части страницы: ось, границы, привязка к сетке, автоскролл, активация.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSelectionArea
      </code>
    </td>
    
    <td>
      Выделение рамкой.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        useDnD
      </code>
      
       / <code>
        useDnDMonitor
      </code>
    </td>
    
    <td>
      Состояние драга и его события в любом месте под провайдером.
    </td>
  </tr>
</tbody>
</table>

<tip>

Переходите с v2? API изменился: `useDnDProvider` стал `useDnD`, а `makeConstraintArea` и
`makeAutoScroll` — `makeDragArea`. Сортируемые списки теперь встроены. См.
[переход с v2](https://zizigy.github.io/docs/getting-started/migrating-from-v2).

</tip>

## Требования

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

Дальше: [установите её](https://zizigy.github.io/docs/getting-started/installation), затем соберите первый список в
[Быстром старте](https://zizigy.github.io/docs/getting-started/quick-start).

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.