Методы экземпляра GridStack

Для работы с GridStack необходимо создать экземпляр сетки. Это делается через статический метод GridStack.init(options, selector) или напрямую через конструктор new GridStack(el, options).

Пример инициализации через селектор:

const grid = GridStack.init({
  column: 12,
  float: true,
  animate: true
}, '.grid-stack');

Параметры options включают:

  • column — количество колонок сетки.
  • float — разрешение «плавающих» элементов, которые не привязаны к сетке.
  • animate — включение анимации при перетаскивании или изменении размера.

Основные методы управления элементами

addWidget(el, options, x, y, width, height)

Добавляет новый элемент в сетку.

  • el — HTML-элемент или разметка в виде строки.
  • options — объект конфигурации виджета: id, minWidth, maxWidth, minHeight, maxHeight.
  • x, y — координаты в сетке.
  • width, height — размеры виджета.
grid.addWidget('<div><div class="grid-stack-item-content">Новый блок</div></div>', 
  {id: 'item1'}, 0, 0, 3, 2);

removeWidget(el, removeDOM)

Удаляет элемент из сетки.

  • el — DOM-элемент или селектор.
  • removeDOM — если true, элемент будет удалён из DOM полностью.
grid.removeWidget(document.getElementById('item1'), true);

batchUpdate() и commit()

Позволяют объединять несколько изменений в одну операцию, что ускоряет работу и предотвращает лишние перерасчёты.

grid.batchUpdate();
grid.addWidget('<div><div class="grid-stack-item-content">Блок A</div></div>', {x:0, y:0, width:2, height:2});
grid.addWidget('<div><div class="grid-stack-item-content">Блок B</div></div>', {x:2, y:0, width:2, height:2});
grid.commit();

Получение информации о сетке

getGridItems()

Возвращает массив всех виджетов сетки с их параметрами (x, y, width, height, id).

const items = grid.getGridItems();
items.forEach(item => console.log(item.el, item.x, item.y, item.width, item.height));

getCellFromPixel(x, y)

Позволяет определить ячейку сетки по координатам пикселя.

const cell = grid.getCellFromPixel(150, 200);
console.log(cell.x, cell.y);

isAreaEmpty(x, y, width, height)

Проверяет, свободна ли область сетки для добавления нового виджета.

if(grid.isAreaEmpty(0, 0, 3, 2)) {
  console.log('Область свободна');
}

Перемещение и изменение размеров виджетов

move(el, x, y, width, height)

Перемещает виджет в указанную позицию.

grid.move(document.getElementById('item1'), 2, 3, 4, 2);

resize(el, width, height)

Изменяет размеры виджета без изменения его позиции.

grid.resize(document.getElementById('item1'), 3, 4);

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

enable() / disable()

Включает или отключает возможность перетаскивания и изменения размеров.

grid.disable(); // блокировка всех виджетов
grid.enable();  // снова разрешает редактирование

float(boolean)

Включение или отключение «плавающего» режима, где виджеты могут находиться поверх друг друга.

grid.float(true); // виджеты могут перекрываться
grid.float(false); // классическое позиционирование

События экземпляра

GridStack предоставляет события для отслеживания действий:

  • change — когда виджет перемещён или изменён размер.
  • added — после добавления виджета.
  • removed — после удаления виджета.
grid.on('change', function(event, items) {
  items.forEach(i => console.log('Изменён виджет:', i.el.id));
});

Сохранение и восстановление состояния

save()

Возвращает текущее состояние сетки в виде массива объектов, включая координаты, размеры и id виджетов.

const state = grid.save();

load(state, clearGrid)

Восстанавливает состояние сетки из сохранённых данных.

grid.load(state, true); // true очищает текущую сетку перед загрузкой

Управление z-index и слоями

update(el, options)

Позволяет обновить свойства виджета без его удаления. Основные опции: x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight.

grid.update(document.getElementById('item1'), {width: 5, height: 3});

Дополнительные методы

  • compact() — уплотняет сетку, перемещая элементы вверх или влево.
  • maxWidth() / maxHeight() — устанавливает максимальные размеры сетки.
  • getCellHeight() / getCellWidth() — возвращает размеры ячеек в пикселях.
  • on(event, callback) / off(event, callback) — привязка и отвязка событий.

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

Оглавление