VGNestable

Визуальное перетаскивание ветвей

Тяните элемент за маркер. Вся ветвь отделяется от списка, placeholder показывает будущую позицию, а горизонтальное движение меняет глубину.

Главная Стартовая страница
Каталог 3 вложенных раздела
1. Новинки Автоматическая подборка
2. Коллекции Ручная подборка
  1. Лето 2026 Сезонная коллекция
3. Распродажа Промо-раздел
О компании Информация и контакты

serialize()

<div id="menu-tree" class="vg-nestable" data-vg-toggle="nestable" data-maxdepth="4">
  <ol class="vg-nestable-list">
    <li class="vg-nestable-item" data-id="1" data-type="page">
      <div class="vg-nestable-inner">
        <button class="vg-nestable-handle" type="button" aria-label="Переместить Главная"></button>
        <div class="vg-nestable-content">Главная</div>
      </div>
    </li>
    <li class="vg-nestable-item" data-id="2" data-type="section">
      <div class="vg-nestable-inner">
        <button class="vg-nestable-handle" type="button" aria-label="Переместить Каталог"></button>
        <div class="vg-nestable-content">Каталог</div>
      </div>
      <ol class="vg-nestable-list">...</ol>
    </li>
  </ol>
</div>

import {VGNestable} from 'vgapp';

const tree = VGNestable.getOrCreateInstance('#menu-tree', {
  maxdepth: 4,
});

tree.expandAll();
console.log(tree.serialize());

#menu-tree {
  --vg-nestable-max-width: 40rem;
  --vg-nestable-list-nested-padding-left: 1.875rem;
  --vg-nestable-placeholder-bg: var(--vg-primary-subtle-bg);
}

VGNestable

Базовая сортировка

Визуальное перетаскивание ветвей