Обработка пользовательских событий

Gridstack.js предоставляет мощный механизм для обработки пользовательских событий, который позволяет управлять действиями пользователей на сетке: перемещением, изменением размеров и удалением виджетов. Все события генерируются непосредственно экземпляром сетки и могут быть перехвачены через методы .on() или через слушатели на уровне DOM.

События делятся на две основные категории:

  1. События виджетов – связанные с конкретным элементом сетки (widget).
  2. События сетки – общие события, влияющие на всю сетку.

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

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

  • added – возникает после добавления нового элемента на сетку.
  • change – возникает при любом изменении позиции или размера виджета.
  • removed – возникает после удаления виджета из сетки.
  • dragstart, drag, dragstop – последовательность событий при перетаскивании виджета.
  • resizestart, resize, resizestop – последовательность событий при изменении размеров виджета.

Пример подключения обработчика для события добавления виджета:

const grid = GridStack.init();
grid.on('added', function(event, items) {
    console.log('Добавлены виджеты:', items);
});
  • event – объект события JavaScript.
  • items – массив объектов, каждый из которых описывает добавленный виджет (позиция, размеры, DOM-элемент).

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

События сетки реагируют на изменения всей структуры. Основные события:

  • change – вызывается при любом изменении сетки, например, при перемещении или изменении размеров любого виджета.
  • dragstart, dragstop – отслеживают начало и завершение всех операций перетаскивания на сетке.
  • resizestart, resizestop – отслеживают операции изменения размеров на всей сетке.

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

grid.on('change', function(event, items) {
    items.forEach(item => {
        console.log(`Виджет ${item.el.id} перемещен в (${item.x}, ${item.y}) размер (${item.w}x${item.h})`);
    });
});

События перетаскивания

Перетаскивание виджетов можно детально контролировать через события dragstart, drag, dragstop.

  • dragstart – срабатывает в момент начала перемещения виджета. Позволяет задать ограничения или изменить визуальные эффекты:
grid.on('dragstart', function(event, el) {
    el.style.border = "2px dashed red";
});
  • drag – срабатывает на каждом шаге перемещения, можно обновлять интерфейс в реальном времени.
  • dragstop – срабатывает после окончания перемещения, здесь выполняется фиксация позиции:
grid.on('dragstop', function(event, el) {
    el.style.border = "";
    console.log(`Виджет ${el.id} установлен на новую позицию`);
});

События изменения размеров

События изменения размеров виджета (resizestart, resize, resizestop) позволяют динамически реагировать на изменение размеров:

grid.on('resizestart', function(event, el) {
    console.log(`Начато изменение размера виджета ${el.id}`);
});

grid.on('resize', function(event, el) {
    console.log(`Текущий размер виджета ${el.id}: ${el.offsetWidth}x${el.offsetHeight}`);
});

grid.on('resizestop', function(event, el) {
    console.log(`Изменение размера виджета ${el.id} завершено`);
});

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

Пользовательские обработчики с данными

Для передачи дополнительных данных при событиях можно использовать объект data в DOM-элементе виджета:

const node = document.createElement('div');
node.dataset.widgetType = 'chart';
grid.addWidget(node, {w:3, h:2});
grid.on('added', function(event, items) {
    items.forEach(item => {
        console.log('Тип виджета:', item.el.dataset.widgetType);
    });
});

Это позволяет связывать события с конкретными бизнес-данными без изменения глобального состояния.

Подключение через делегирование DOM

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

document.querySelector('.grid-stack').addEventListener('gsresizestop', function(e) {
    console.log('Resize через DOM-событие:', e.detail);
});
  • События DOM имеют префикс gs (например, gsdragstart, gsresizestop).
  • В e.detail передается объект с данными виджета и информацией о событии.

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

Советы по работе с событиями

  1. Использовать .on() вместо прямых слушателей DOM, если требуется точная синхронизация с внутренним состоянием Gridstack.
  2. Фильтровать события по виджету через item.el.id или data-* атрибуты, чтобы обработчики не срабатывали на всех виджетах сразу.
  3. Объединять события drag/resize с debounce, если планируется обновление данных на сервер, чтобы избежать частых вызовов.
  4. Отслеживать added и removed, чтобы автоматически управлять ресурсами (например, удалять графики или таймеры внутри виджета).

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

Оглавление