---
title: "Примеры"
description: "Живые демо с кодом — каждый файл, который вы видите, работает на странице. Копируйте их или открывайте в StackBlitz."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/ru/docs/examples"
---

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

Каждый пример — небольшое Vue-приложение: `index.vue` со своим `DnDProvider` и нужные ему
компоненты. Вкладки с кодом под демо — это те самые файлы, которые его запускают.

## Приложения

Целые интерфейсы — такие, какими вы бы их строили сами: несколько списков, правила, оверлеи и
клавиатура работают вместе.

<card-group>
<card icon="i-lucide-square-kanban" title="Доска проекта" to="/docs/examples/board">

Колонки, которые можно переставлять, WIP-лимиты, подтверждение перед Done, множественное
выделение и корзина.

</card>

<card icon="i-lucide-calendar-days" title="Календарь на неделю" to="/docs/examples/calendar">

События перетаскиваются между днями и получасами с привязкой к сетке.

</card>

<card icon="i-lucide-folder-open" title="Файловый менеджер" to="/docs/examples/file-manager">

Дерево папок и сетка файлов: выделение рамкой, броски на папки, Alt для копирования.

</card>

<card icon="i-lucide-blocks" title="Блочный редактор" to="/docs/examples/block-editor">

Блоки в духе Notion: перемещаются за ручки, вкладываются друг в друга и перетаскиваются из меню
«/» или боковой панели.

</card>

<card icon="i-lucide-chess-knight" title="Шахматы" to="/docs/examples/chess">

Допустимые ходы подсвечиваются, фигура в руке говорит, почему поле отклонено, пешка спрашивает,
кем ей стать, а бот отвечает настоящими драгами.

</card>

<card icon="i-lucide-text-cursor-input" title="Конструктор форм" to="/docs/examples/form-builder">

Поля Nuxt UI из палитры, расставленные рядом в строках, заполняемые в живом превью и
экспортируемые как код Vue.

</card>

<card icon="i-lucide-pen-tool" title="Холст для дизайна" to="/docs/examples/design-canvas">

Фреймы и слои на масштабируемом холсте, умные направляющие, Alt для дублирования и панель
слоёв, которая и есть дерево дизайна.

</card>

<card icon="i-lucide-layout-template" title="Конструктор страниц" to="/docs/examples/page-builder">

Секции, которые над страницей превращаются в настоящие, элементы между колонками, дерево слоёв
на тех же данных, редактирование на месте.

</card>

<card icon="i-lucide-table-2" title="Таблица данных" to="/docs/examples/data-table">

Таблица Nuxt UI на 2 000 задач: виртуализированная, с поиском, сортируется за ручки строк.

</card>
</card-group>

## Sitemap

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