Глобальные события сетки

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

Подключение и использование событий

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

const grid = GridStack.init({ /* настройки */ });

Регистрация события осуществляется следующим образом:

grid.on('change', function(event, items) {
  console.log('Произошли изменения в сетке', items);
});

Основные глобальные события

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

  1. added Срабатывает при добавлении новых виджетов в сетку. Аргументы:

    • event — объект события DOM.
    • items — массив объектов, описывающих добавленные виджеты (x, y, width, height, id).

    Пример:

    grid.on('added', (event, items) => {
  items.forEach(item => console.log('Добавлен виджет:', item.id));
});

  2. removed Срабатывает при удалении виджетов. Структура аргументов идентична added.

    grid.on('removed', (event, items) => {
  console.log('Удалены виджеты:', items.map(i => i.id));
});

  3. change Основное событие для отслеживания всех изменений: перемещения и изменения размеров. Аргументы:

    • items — массив объектов с текущими координатами и размерами каждого изменившегося виджета.
    grid.on('change', (event, items) => {
  items.forEach(i => console.log(`Виджет ${i.id} перемещен в (${i.x}, ${i.y})`));
});

  4. dragstart / dragstop Срабатывают при начале и окончании перетаскивания виджета. Полезны для реализации динамической визуальной обратной связи.

    grid.on('dragstart', (event, el) => console.log('Начало перетаскивания', el.id));
grid.on('dragstop', (event, el) => console.log('Окончание перетаскивания', el.id));

  5. resizestart / resizestop События начала и окончания изменения размеров виджета. Используются для обновления данных в реальном времени или подгонки интерфейса.

    grid.on('resizestop', (event, el) => {
  const node = grid.getNode(el);
  console.log(`Виджет ${el.id} теперь ${node.w}x${node.h}`);
});

Детальный разбор объектов событий

Каждый элемент массива items или объект node содержит свойства:

  • x, y — координаты верхнего левого угла в сетке.
  • w, h — ширина и высота в ячейках.
  • id — уникальный идентификатор виджета.
  • el — DOM-элемент виджета.

Для событий drag и resize дополнительно доступны данные о смещении (dx, dy) и текущей позиции в пикселях (offsetX, offsetY), что позволяет реализовать сложные анимации и ограничения перемещений.

Делегирование и обработка нескольких сеток

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

const grid1 = GridStack.init({ container: '#grid1' });
const grid2 = GridStack.init({ container: '#grid2' });

grid1.on('change', (event, items) => console.log('Сетка 1 изменилась'));
grid2.on('change', (event, items) => console.log('Сетка 2 изменилась'));

Отмена стандартного поведения

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

grid.on('change', (event, items) => {
  items.forEach(node => {
    if(node.x > 5) node.x = 5;
  });
});

События при загрузке и сохранении состояния

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

grid.on('change', () => {
  const serialized = grid.save();
  localStorage.setItem('grid-state', JSON.stringify(serialized));
});

При инициализации сетки сохраненное состояние можно восстановить:

const saved = JSON.parse(localStorage.getItem('grid-state') || '[]');
GridStack.init({ /* настройки */ }).load(saved);

Взаимодействие с динамическими данными

Глобальные события позволяют синхронизировать сетку с внешними источниками данных, например, серверными API:

grid.on('added', (event, items) => {
  fetch('/api/widgets/add', {
    method: 'POST',
    body: JSON.stringify(items)
  });
});

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

  • Использовать change для любых операций с координатами и размерами, а added/removed — только для контроля добавления и удаления виджетов.
  • Всегда проверять наличие DOM-элемента через el перед манипуляциями.
  • Для крупных сеток рекомендуется минимизировать количество вычислений внутри событий, чтобы избежать лагов интерфейса.

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

Оглавление