--- title: "Сортируемые списки" description: "Списки, полосы вкладок и сетки, которые перестраиваются во время драга — makeSortableList рендерит черновик, makeSortableItem делает строки, а бросок записывает новый порядок в ваш ref. Ручки, линия вставки, обмен местами." canonical_url: "https://zizigy.github.io/vue-dnd-kit/ru/docs/guides/sortable-lists" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) ## Список и его строки Сортируемому списку нужны два компонента: список и его строка. ```vue [LayersPanel.vue] ``` ```vue [LayerRow.vue] ``` Строка регистрируется в списке, внутри которого она отрендерена. Компонент может создать несколько списков (две колонки, список внутри списка): каждая строка входит в тот, чей элемент её содержит, а у вложенных списков — в самый внутренний. ## Черновик `makeSortableList` возвращает `items` — **черновик** вашего массива. Пока вы перетаскиваете, черновик перестраивается вживую: перетаскиваемая строка занимает новый слот, а остальные отъезжают в сторону. Ваш массив не меняется до броска. Тогда библиотека записывает в него новый порядок. Панель слоёв выше показывает и то, и другое: панель рендерит `items` и двигается во время драга; монтажная область читает `layers`, сам массив, и меняет порядок слоёв, только когда вы отпускаете. - Рендерите `items`, а не свой массив. Если рендерить свой массив, до броска ничего не двигается. - Запись происходит после `onDrop` списка. В `onDrop` ваш массив ещё содержит старый порядок, а `e.result` — новый. - `layers` — обычный ref (здесь `defineModel`, и запись эмитит `update:modelValue`), поэтому остальное приложение видит изменение, как любое другое. ```ts makeSortableList(list, { items: layers, onDrop: (e) => { console.log(e.from.index, '→', e.to.index, e.result.get(e.to.list)); }, }); ``` Стор, серверное состояние или иммутабельные данные? Передайте геттер или `computed` вместо ref. Библиотека не пишет в источник только для чтения: вызовите `e.preventDefault()` и примените `e.result` сами. См. [управляемые списки](https://zizigy.github.io/docs/guides/shared-lists#controlled-lists). ## Ключи Строки идентифицируются по своим данным, а не по индексу и не по автоматическому id. По умолчанию ключ — `item.id`, а для строк и чисел — сам элемент. ```ts // LayersPanel.vue: your items have another key makeSortableList(list, { items: layers, getKey: (layer) => layer.uuid }); // LayerRow.vue: `item` is keyed with the list's getKey… makeSortableItem(el, { item: () => props.layer }); // …or pass the key yourself makeSortableItem(el, { id: () => props.layer.uuid }); ``` - Используйте тот же ключ в `v-for`: `:key="layer.uuid"`. С `:key="index"` анимируются не те строки, и их состояние перескакивает между строками. - Ключи должны быть уникальны среди всех списков, которые обмениваются элементами. - Передавайте `item` и `id` геттерами, чтобы строка оставалась синхронной при изменении пропсов. ## Ручки По умолчанию драг начинается со всей строки, кроме кнопок, полей ввода и других элементов управления в ней: глаз и замок слоя остаются обычными кнопками. Передайте `handle`, чтобы перетаскивать только за одну часть: ```vue [LayerRow.vue] ``` - `handle` — селектор внутри элемента или ref на элемент. - Драг мышью начинается с ручки сразу, без обычных 4 px. Нажатие без движения остаётся кликом: ручка может открывать меню по `click`. - Ручка получает атрибуты драга (`role`, `tabindex`, `aria-*`), и перетаскивание с клавиатуры начинается с неё. Сделайте ручку элементом `