Конфигурация дочерних сеток

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

Инициализация дочерней сетки

Для создания дочерней сетки внутри родительского элемента используется стандартный метод GridStack.init(), при этом дочерняя сетка может иметь собственные настройки:

const parentGrid = GridStack.init({cellHeight: 80, margin: 10});
const childGrid = GridStack.init({
  staticGrid: false,
  cellHeight: 60,
  column: 4,
  disableResize: false
}, document.querySelector('.child-grid'));

Ключевые моменты:

  • document.querySelector('.child-grid') — указание контейнера дочерней сетки.
  • Параметры cellHeight и column для дочерней сетки могут отличаться от родительской.
  • staticGrid позволяет включить или отключить возможность перетаскивания и изменения размера блоков.

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

Дочерние сетки поддерживают большинство опций родительской сетки, но есть особенности при вложении:

  • column — количество колонок в дочерней сетке. Не обязательно совпадает с родительской сеткой.
  • cellHeight — высота ячеек, может задаваться в пикселях или через auto.
  • disableResize — отключает возможность изменения размеров блоков внутри дочерней сетки.
  • float — определяет, будут ли блоки «плавать» при изменении размера.
  • draggable.handle — позволяет назначить конкретный элемент для захвата блока при перетаскивании, что особенно полезно при вложенных сетках.

Пример с настройкой обработчика перетаскивания:

const childGrid = GridStack.init({
  column: 3,
  draggable: {
    handle: '.child-handle'
  }
}, document.querySelector('.child-grid'));

События дочерней сетки

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

  • change — вызывается при изменении положения или размеров блоков.
  • added / removed — события добавления и удаления элементов.
  • dragstart / dragstop — перетаскивание элементов внутри дочерней сетки.

Пример обработки события изменения:

childGrid.on('change', function(event, items) {
  console.log('Дочерняя сетка изменилась:', items);
});

Управление взаимодействием с родительской сеткой

При работе с дочерними сетками важно правильно настраивать взаимодействие:

  1. Изоляция перемещений Чтобы блоки дочерней сетки не влияло на родительскую, используется nested: true при инициализации родительской сетки:
const parentGrid = GridStack.init({nested: true});
  1. Синхронизация размеров Если необходимо, чтобы размеры родительской сетки автоматически подстраивались под дочерние блоки, можно использовать метод update():
childGrid.on('change', () => {
  parentGrid.update();
});
  1. Контроль перетаскивания между сетками Для ограничения перемещения блоков только внутри своей сетки используется опция acceptWidgets: false в родительской сетке.

Динамическое добавление дочерних блоков

Дочерние сетки полностью поддерживают динамическое добавление и удаление элементов:

childGrid.addWidget({
  x: 0,
  y: 0,
  width: 2,
  height: 1,
  content: '<div class="child-item">Новый блок</div>'
});
  • x, y — координаты блока в сетке.
  • width, height — размеры в единицах сетки.
  • content — HTML-содержимое блока.

Настройка визуального представления

Дочерние сетки могут иметь собственные стили, независимые от родительской сетки. Часто используют классы для ограничения размеров или задания уникального фона:

.child-grid {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 5px;
}
.child-grid .grid-stack-item {
  background-color: #e0f7fa;
}
  • Вложенные блоки визуально отделяются от родительской сетки.
  • padding и margin помогают избежать наложений блоков.

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

  • Использовать дочерние сетки для логически независимых блоков, которые требуют отдельной структуры.
  • Минимизировать использование глобальных событий родительской сетки для дочерних элементов, чтобы избежать конфликтов.
  • Настраивать draggable.handle и disableResize для контроля UX при множестве вложенных сеток.
  • Для сложных интерфейсов рекомендуется создавать дочерние сетки динамически через JavaScript, а не через статический HTML, что облегчает управление и обновление структуры.

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

Оглавление