Подписка на события

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

Основные события Gridstack.js

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

1. События сетки

  • change Вызывается, когда изменяется расположение или размер виджетов в сетке. Возвращает массив объектов, содержащих информацию о каждом виджете, который был изменён.

    grid.on('change', function(event, items) {
    items.forEach(function(item) {
        console.log(`Widget ${item.id} изменён: x=${item.x}, y=${item.y}, w=${item.w}, h=${item.h}`);
    });
});

  • added Срабатывает при добавлении новых виджетов в сетку.

    grid.on('added', function(event, items) {
    console.log(`Добавлено ${items.length} виджетов`);
});

  • removed Срабатывает при удалении виджетов из сетки.

    grid.on('removed', function(event, items) {
    console.log(`Удалено ${items.length} виджетов`);
});

2. События виджетов

  • dragstart / drag / dragstop Отслеживают начало перетаскивания, процесс перемещения и завершение перетаскивания виджета.

    grid.on('dragstart', function(event, ui) {
    console.log(`Начато перетаскивание виджета ${ui.node.id}`);
});

grid.on('dragstop', function(event, ui) {
    console.log(`Завершено перетаскивание виджета ${ui.node.id}`);
});

  • resizestart / resize / resizestop Аналогично событиям перетаскивания, но для изменения размера виджетов.

    grid.on('resizestop', function(event, ui) {
    console.log(`Виджет ${ui.node.id} изменил размер: w=${ui.node.w}, h=${ui.node.h}`);
});

Подписка через метод on и удаление слушателей

Gridstack.js использует стандартный подход jQuery-подобного события: on для добавления подписчиков и off для их удаления.

function onChangeHandler(event, items) {
    console.log('Событие изменения сетки', items);
}

grid.on('change', onChangeHandler);

// Удаление обработчика
grid.off('change', onChangeHandler);

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

Передача данных через события

События Gridstack.js позволяют передавать дополнительные данные через объект виджета (node) или через параметры события. Например, можно хранить пользовательские идентификаторы или метаданные:

grid.on('added', function(event, items) {
    items.forEach(item => {
        console.log(`Добавлен виджет с userId=${item.el.dataset.userId}`);
    });
});

Здесь dataset используется для хранения любых произвольных данных, которые можно передавать вместе с виджетом.

Подписка на все события виджета

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

grid.engine.nodes.forEach(node => {
    node.el.addEventListener('change', function(e) {
        console.log('Произошло изменение виджета', node.id);
    });
});

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

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

  • Всегда использовать off, если обработчик может стать ненужным, особенно при удалении виджетов.
  • Для сложных интерфейсов удобно хранить ссылки на все обработчики, чтобы можно было легко управлять подписками.
  • При работе с динамически добавляемыми виджетами подписки лучше делать после их вставки в DOM.
  • Использовать события dragstop и resizestop для обновления данных на сервере, чтобы избежать лишних запросов при каждом движении.

Дополнительные события для интеграции

  • enable / disable – уведомления о включении или отключении сетки.
  • changeoptions – уведомление о смене параметров сетки.
  • removed / added – полезны для синхронизации состояния с сервером или локальным хранилищем.

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

Оглавление