---
title: "Быстрый старт"
description: "Сортируемый список в трёх файлах — провайдер, список и его строки."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/ru/docs/getting-started/quick-start"
---

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

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



</kbd>

, передвиньте её стрелками и снова нажмите <kbd value="Space">



</kbd>

.

<example name="quick-start" title="Быстрый старт">



</example>

## По шагам

<steps level="3">

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

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

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

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

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

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

</steps>

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

<tip>

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

</tip>

## Sitemap

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