Управление глубиной вложенности

Gridstack.js — это библиотека для создания интерактивных, сеточных макетов с возможностью перетаскивания и изменения размеров виджетов. Одной из ключевых возможностей является управление вложенностью элементов, что позволяет создавать сложные интерфейсы с многоуровневыми структурами.

Основные принципы вложенности

Gridstack.js поддерживает контейнеры внутри контейнеров, где каждый внутренний контейнер может вести себя как отдельная сетка с собственными элементами.

  • grid-container — основной контейнер, инициализируемый через GridStack.init().
  • nested grid — вложенная сетка, также инициализируемая через GridStack.init() на элементе внутри родительской сетки.

Ключевой момент: вложенные сетки не наследуют полностью свойства родительской сетки. Каждая сетка управляет своими виджетами независимо, хотя общая структура может влиять на размеры и позиционирование элементов.

Инициализация вложенных сеток

Для создания вложенной сетки внутри виджета используется следующий подход:

const parentGrid = GridStack.init({
    column: 12,
    draggable: { handle: '.grid-stack-item-content' }
});

parentGrid.addWidget({
    w: 6,
    h: 4,
    content: '<div class="nested-grid"></div>'
});

const nestedGridEl = document.querySelector('.nested-grid');
const nestedGrid = GridStack.init({
    column: 6,
    draggable: { handle: '.grid-stack-item-content' }
}, nestedGridEl);

Здесь ключевое:

  • parentGrid — родительская сетка, содержащая виджеты.
  • nestedGrid — отдельная сетка внутри виджета, которая может содержать свои виджеты.
  • content родительского виджета содержит HTML-контейнер для вложенной сетки.

Управление глубиной вложенности

Gridstack.js не ограничивает уровень вложенности, но на практике рекомендуется не превышать 2–3 уровней, чтобы избежать проблем с производительностью и корректностью drag&drop.

Для управления вложенными сетками используют следующие свойства и методы:

  1. nested: true — при добавлении виджета указывает, что внутри него может быть вложенная сетка.

  2. Методы работы с виджетами родительской сетки:

    • grid.removeWidget(el) — удаление виджета с вложенной сеткой автоматически уничтожает все вложенные элементы.
    • grid.update(el, opts) — обновление размеров и позиции виджета, включая контейнер вложенной сетки.

Пример удаления вложенной сетки:

parentGrid.removeWidget(nestedGridEl, true); // true — destroy nested grid

Управление размерами и позиционированием

Вложенные сетки управляются через собственные колонки и строки. Для согласования с родительской сеткой используются пропорции:

  • Позиция и размеры вложенных элементов задаются в локальных единицах сетки.
  • Автоподгонка размеров возможна с помощью опции cellHeight и verticalMargin, чтобы вложенные элементы визуально соответствовали родительской сетке.

Пример установки единых размеров:

nestedGrid.cellHeight(50);       // высота строки 50px
nestedGrid.verticalMargin(10);   // отступ между элементами

Если родительская сетка изменяет ширину, вложенные сетки могут масштабироваться автоматически через CSS или через метод nestedGrid.compact(), который перераспределяет элементы в доступном пространстве.

Drag & Drop и вложенность

Особенность вложенных сеток заключается в том, что drag & drop работает независимо для каждого уровня:

  • Виджеты родительской сетки перемещаются только внутри родителя.
  • Виджеты вложенной сетки перемещаются внутри своего контейнера.

Для поддержки переноса виджетов между уровнями можно использовать событие dragstop:

nestedGrid.on('dragstop', function(event, el) {
    // проверка позиции и перемещение в родительскую сетку при необходимости
});

Важно: автоматическое перемещение между сетками требует дополнительной логики, так как Gridstack.js по умолчанию не объединяет разные уровни drag & drop.

Практические рекомендации

  • Вложенные сетки следует использовать только для логически обособленных групп виджетов.
  • Для сложных интерфейсов можно создавать двухуровневую структуру, где родительская сетка управляет макетом, а вложенные — деталями контента.
  • Избегать чрезмерного количества уровней, чтобы не снижать производительность браузера.
  • При динамическом добавлении виджетов контролировать nested: true и правильно уничтожать сетки через removeWidget(el, true).
  • Использовать CSS overflow: auto на контейнерах вложенных сеток для корректного отображения скролла при переполнении.

Управление глубиной вложенности в Gridstack.js позволяет создавать гибкие и масштабируемые интерфейсы, сохраняя контроль над расположением и размерами элементов на разных уровнях. Правильное использование вложенных сеток обеспечивает устойчивую работу drag & drop, согласованное масштабирование и удобное управление контентом внутри сложной структуры.

Оглавление