--- title: "Vue DnD Kit — drag and drop for Vue" description: "Сортируемые списки, канбан-доски, деревья и мульти-драг для Vue 3 — с анимациями, клавиатурой и доступностью из коробки." canonical_url: "https://zizigy.github.io/vue-dnd-kit/ru" meta: "og:description": "Сортируемые списки, канбан-доски, деревья и мульти-драг для Vue 3 — с анимациями, клавиатурой и доступностью из коробки." "og:title": "Vue DnD Kit — drag and drop for Vue" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) v3 — Drag and drop для Vue 3Vue 3 · TypeScript · SSR 01Канбан **Доски, которые меняются карточками** 02Деревья **Вложенность одним движением** 03Мульти-драг **Много элементов, одно движение** 04Сортировка **Списки, которые сортируются сами** 05Анимации **Движение по умолчанию** 06A11y space←↑↓→ **Клавиатура наравне с мышью** 07Виртуализация **Десять тысяч строк** Перетащите карточки — или перейдите к одной клавишей Tab и двигайте стрелками # Drag and drop,
созданный для Vue. Сортируемые списки, канбан-доски, деревья и мульти-драг для Vue 3 — с анимациями, клавиатурой и доступностью из коробки. npm i @vue-dnd-kit/core [Начать](https://zizigy.github.io/vue-dnd-kit/ru/docs/getting-started/introduction) Бесплатно и с открытым кодом. Лицензия MIT. 00Как это устроено ## Композаблы,
а не компоненты. Ваша разметка, ваши стили. Передайте template ref в композабл — и элемент перетаскивается, сортируется и принимает броски, а анимации, клавиатура и скринридеры уже настроены. - 01 `**makeSortableList**`Списки, сетки и колонки канбана: перестраиваются во время драга и обмениваются элементами внутри группы. - 02 `**makeSortableTree**`Вложенные данные, отрисованные плоско: глубина сдвигом вбок, бросок в папку, виртуализация. - 03 `**makeDraggable · makeDroppable**`Всё остальное: доски, холсты, загрузки — ваши правила, что и куда можно положить. 01Drag & drop ## Перетащить и бросить Перетаскиваемый элемент, цель и правило, что куда можно положить. Цели подсвечиваются, когда принимают драг, и отказывают чужому, а что делает бросок — решаете вы. [Документация](https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/drag-and-drop) Live Разложите файлы по папкам X ---- · Y ---- Загружаем демо… 02Сортировка ## Списки и сетки Рендерите черновик массива — он перестраивается прямо во время драга. При броске новый порядок записывается в ваш ref. Вертикально, горизонтально или сеткой любого размера. [Документация](https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/sortable-lists) Live Переставьте приложения или перенесите одно в док X ---- · Y ---- Загружаем демо… 03Канбан ## Канбан-доски Списки одной группы обмениваются элементами. Копирование из палитры, приём внешних элементов или обмен местами — список-получатель освобождает место прямо под курсором. [Документация](https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/shared-lists) Live Переносите карточки между колонками X ---- · Y ---- Загружаем демо… 04Деревья ## Деревья Отрисовываются плоско с глубинами, поэтому виртуализируются. Сдвиг вбок меняет уровень, наведение на папку кладёт внутрь; ограничивайте глубину и решайте, что куда вкладывается. [Документация](https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/trees) Live Сдвиг вбок меняет глубину X ---- · Y ---- Загружаем демо… 05Мульти-драг ## Мульти-драг Выделите Ctrl/Cmd-кликом или рамкой и потащите один элемент — всё выделенное поедет вместе и встанет по порядку, даже между списками. [Документация](https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/multi-drag) Live Ctrl/Cmd-клик или рамка, затем тащите X ---- · Y ---- 06Ограничения ## Оси, границы и сетки Область перетаскивания задаёт правила для всего, что тащат внутри неё: фиксирует ось, держит драг в своих границах, примагничивает к сетке — и всё это меняется на лету. [Документация](https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/constraints) Live Переключите правила и потащите фигуру X ---- · Y ---- Загружаем демо… 07И ещё ## Готово к настоящим приложениям. 01 ### Анимации FLIP при сортировке, приземление на слот, анимация изменений данных. Можно подключить GSAP или motion. 02 ### Доступность Перенос с клавиатуры по слотам, озвучивание и ARIA-атрибуты, которые не перезаписывают ваши. 03 ### Виртуальные списки TanStack Virtual и VueUse: тысячи строк — и всё так же с сортировкой и анимацией. 04 ### Управляемый режим Pinia, сервер или иммутабельные данные: пропустите запись по умолчанию и примените результат сами. 08Экосистема ## Небольшое ядро и несколько точных инструментов. Перетаскивать можно уже с одним ядром. Остальное подключайте, когда понадобится. 01 @vue-dnd-kit/devtools ### DevTools Вкладка в Vue DevTools и Nuxt DevTools: живая мини-карта, джойстик, который тащит что угодно, и правка опций на лету. 02 @vue-dnd-kit/actions ### Программный драг «Вверх», «в Done», интерактивные туры и тесты — настоящие перетаскивания с анимацией и озвучиванием, из кода. 03 @vue-dnd-kit/nuxt ### Nuxt-модуль Автоимпорт композаблов, глобальные компоненты и безопасные для SSR настройки. 04 npx skills add ### Для ИИ-агентов Навык, который объясняет Claude Code и другим ассистентам, как устроена библиотека. npx skills add ZiZIGY/vue-dnd-kit **01** 1 243 Сквозных тестов в трёх браузерах **02** 469 Юнит-тестов **03** 21KB Draggable и зоны сброса, gzip **04** 9 Языков документации ## С чего начать. [**01**

**Читать руководство**

От установки до первого сортируемого списка за пять минут.](https://zizigy.github.io/vue-dnd-kit/ru/docs/getting-started/introduction) [**02**

**Смотреть примеры**

Живые демо с кодом: копируйте или открывайте в StackBlitz.](https://zizigy.github.io/vue-dnd-kit/ru/docs/examples) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://zizigy.github.io/vue-dnd-kit/ru#website","@type":"WebSite","description":"Drag and drop for Vue 3: sortable lists, kanban boards, trees, multi-drag, animations and accessibility out of the box.","inLanguage":"ru-RU","name":"Vue DnD Kit","url":"https://zizigy.github.io/vue-dnd-kit/ru","translationOfWork":{"@id":"https://zizigy.github.io/vue-dnd-kit#website"}},{"@id":"https://zizigy.github.io/vue-dnd-kit/ru#webpage","@type":"WebPage","description":"Сортируемые списки, канбан-доски, деревья и мульти-драг для Vue 3 — с анимациями, клавиатурой и доступностью из коробки.","url":"https://zizigy.github.io/vue-dnd-kit/ru","isPartOf":{"@id":"https://zizigy.github.io/vue-dnd-kit/ru#website"},"potentialAction":[{"@type":"ReadAction","target":["https://zizigy.github.io/vue-dnd-kit/ru"]}]}]} ``` ## Sitemap See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.