Множественные сетки на странице

Gridstack.js позволяет создавать интерактивные сетки, в которых элементы можно перетаскивать и изменять их размеры. На одной странице возможно размещение нескольких независимых сеток. Для этого необходимо создавать отдельные контейнеры <div> с уникальными идентификаторами и инициализировать Gridstack для каждого контейнера отдельно.

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

<div id="grid1" class="grid-stack"></div>
<div id="grid2" class="grid-stack"></div>
const grid1 = GridStack.init({
  column: 12,
  float: true
}, '#grid1');

const grid2 = GridStack.init({
  column: 8,
  float: false
}, '#grid2');

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

Настройка и независимость сеток

Каждая сетка может иметь свои настройки колонок, размеров ячеек, марджинов и поведения drag&drop. Параметры можно передавать как при инициализации через объект конфигурации, так и изменять динамически с помощью методов grid.column(), grid.cellHeight(), grid.margin().

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

grid1.column(6); // изменяет количество колонок на 6
grid2.cellHeight(100); // устанавливает высоту ячейки для второй сетки

Важно: при работе с множественными сетками следует избегать общих селекторов .grid-stack для событий, так как это может вызвать конфликт между сетками. Все операции должны выполняться через конкретный экземпляр.

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

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

grid1.addWidget({
  x: 0, y: 0, w: 4, h: 2,
  content: '<div class="widget">Элемент 1</div>'
});

grid2.addWidget({
  x: 1, y: 1, w: 2, h: 2,
  content: '<div class="widget">Элемент A</div>'
});

Метод removeWidget(el) позволяет удалять виджеты из конкретной сетки, не затрагивая другие.

События и обработчики для отдельных сеток

Gridstack.js предоставляет богатый набор событий: added, removed, change, dragstart, dragstop. При множественных сетках важно привязывать обработчики к конкретной сетке:

grid1.on('added', (event, items) => {
  console.log('Элементы добавлены в grid1', items);
});

grid2.on('change', (event, items) => {
  console.log('Изменения в grid2', items);
});

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

Drag & Drop между сетками

Gridstack.js поддерживает перенос виджетов между сетками через настройку acceptWidgets и использование jQuery UI draggable/droppable. Для каждой сетки можно определить, какие элементы она может принимать:

GridStack.init({
  acceptWidgets: true
}, '#grid1');

GridStack.init({
  acceptWidgets: true
}, '#grid2');

Затем нужно сделать элементы виджетов перетаскиваемыми:

$('.grid-stack-item').draggable({
  revert: 'invalid',
  handle: '.widget'
});

При этом Gridstack автоматически обновит координаты виджета и удалит его из предыдущей сетки.

Синхронизация и сохранение состояния

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

let stateGrid1 = grid1.save();
let stateGrid2 = grid2.save();

И восстановление с помощью load():

grid1.load(stateGrid1);
grid2.load(stateGrid2);

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

Советы по производительности

  • Инициализация каждой сетки отдельным экземпляром снижает риски конфликтов.
  • Минимизировать использование глобальных селекторов .grid-stack при множественных сетках.
  • При большом количестве виджетов рекомендуется использовать виртуализацию или отложенную отрисовку.
  • Drag & drop между сетками стоит тестировать отдельно, чтобы избежать проблем с z-index и наложением элементов.

Итоговая структура HTML для множественных сеток

<div class="container">
  <div id="grid1" class="grid-stack"></div>
  <div id="grid2" class="grid-stack"></div>
  <div id="grid3" class="grid-stack"></div>
</div>

Каждый <div> становится автономной сеткой с собственными виджетами, настройками и событиями. Такой подход обеспечивает гибкость и масштабируемость интерфейсов, где одновременно присутствуют несколько рабочих областей с drag & drop функционалом.

Оглавление