Типы событий в Gridstack.js

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

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

change Происходит каждый раз, когда изменяется положение или размер одного или нескольких элементов сетки. Событие возвращает массив объектов с информацией о каждом изменённом элементе:

grid.on('change', function(event, items) {
    items.forEach(function(item) {
        console.log('Изменён элемент:', item.el);
        console.log('Новая позиция:', item.x, item.y);
        console.log('Новый размер:', item.w, item.h);
    });
});

Ключевые свойства item:

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

resizestart и resize События отслеживают начало и процесс изменения размера элемента.

grid.on('resizestart', function(event, el) {
    console.log('Начало изменения размера:', el);
});

grid.on('resize', function(event, el) {
    console.log('Изменяется размер элемента:', el);
});

resizestop Происходит после завершения изменения размера. Обычно используется для сохранения новых размеров в базу данных или для пересчёта макета.

grid.on('resizestop', function(event, el) {
    const node = el.gridstackNode;
    console.log(`Элемент ${el.id} изменён до ${node.w}x${node.h}`);
});

События перемещения элементов

dragstart, drag, dragstop Эти события управляют процессом перетаскивания виджетов.

  • dragstart – момент, когда пользователь начинает перетаскивать элемент.
  • drag – происходит на каждом шаге движения.
  • dragstop – фиксирует окончательную позицию элемента после перемещения.
grid.on('dragstop', function(event, el) {
    const node = el.gridstackNode;
    console.log(`Элемент перемещён в позицию ${node.x}, ${node.y}`);
});

added и removed Эти события информируют о добавлении или удалении элементов сетки. added вызывается при вставке новых виджетов через API, а removed – при их удалении.

grid.on('added', function(event, items) {
    console.log('Добавлены элементы:', items.map(i => i.el.id));
});

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

События изменения содержимого и состояния

enable и disable Эти события информируют о включении или отключении интерактивности сетки. Например, можно временно запретить перетаскивание всех элементов:

grid.on('disable', function() {
    console.log('Сетка заблокирована');
});

drag и resize на уровне элемента Gridstack позволяет подписываться на события конкретного виджета через объект Node:

const node = grid.getNode(el);
node.on('drag', function(event) {
    console.log('Идёт перетаскивание конкретного элемента');
});

Специальные и системные события

dropped Срабатывает при добавлении внешнего элемента в сетку через drag-and-drop. Возвращает объект с DOM-элементом и позицией:

grid.on('dropped', function(event, previousWidget, newWidget) {
    console.log('Элемент был добавлен извне:', newWidget.el.id);
});

change с фильтром changed Позволяет различать фактические изменения элементов, исключая события, которые не повлияли на положение или размер:

grid.on('change', function(event, items) {
    const modified = items.filter(i => i.changed);
    console.log('Изменённые элементы:', modified);
});

Важные особенности работы с событиями

  1. Объект события (event) – содержит стандартные свойства DOM-события, включая target, type и координаты.
  2. Объект элемента (el) – всегда доступен, содержит ссылку на DOM и на внутренний объект Gridstack Node через el.gridstackNode.
  3. Массив items – часто используется для групповых изменений, например при удалении или добавлении нескольких виджетов одновременно.
  4. Подписка и отписка – события можно удалять с помощью метода off:
grid.off('change', myHandler);
  1. Комбинирование событий – для сложных интерфейсов можно объединять drag/resize с added и removed для полной синхронизации состояния UI с базой данных.

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

Оглавление