CoreSortableList

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Список с перетаскиванием за ручку: сортировка внутри списка и перенос между списками одного groupId. Порядок элементов передаётся массивом items — JSON-биндинг :items='[…]'; элемент — объект с обязательным стабильным id(на нём стоит DnD). Перетаскивание работает прямо в контенте: порядок в DOM меняется на лету, для записи в данные подключите@update:items` в Vue-коде.

Сортировка задач

alpha
beta
gamma

Перенос между списками

Списки с одинаковым groupId обмениваются элементами — перетащите задачу между колонками:

todo-1
todo-2

done-1

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Список с перетаскиванием за ручку: сортировка внутри списка и перенос между списками одного `groupId`. Порядок элементов передаётся массивом `items` — JSON-биндинг `:items='[…]'; элемент — объект с обязательным стабильным `id` (на нём стоит DnD). Перетаскивание работает прямо в контенте: порядок в DOM меняется на лету, для записи в данные подключите `@update:items` в Vue-коде.

### Сортировка задач

::core-sortable-list{:items='[{"id":"alpha","label":"Черновик"},{"id":"beta","label":"На ревью"},{"id":"gamma","label":"Готово"}]' list-label="Этапы задачи"}
::

### Перенос между списками

Списки с одинаковым `groupId` обмениваются элементами — перетащите задачу между колонками:

::core-sortable-list{:items='[{"id":"todo-1","label":"Собрать стенд"},{"id":"todo-2","label":"Написать отчёт"}]' group-id="kanban" list-label="К выполнению"}
::

::core-sortable-list{:items='[{"id":"done-1","label":"Согласовать смету"}]' group-id="kanban" list-label="Готово"}
::