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

В Gridstack.js события изменения размеров (resize) являются одной из ключевых возможностей для создания динамических, интерактивных сеток. Библиотека позволяет отслеживать процесс изменения размеров виджетов и реагировать на него программно, что особенно важно для построения адаптивных интерфейсов и сохранения состояния сетки.

Основные события, связанные с изменением размеров

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

  1. resizestart – срабатывает в момент начала изменения размера элемента. Позволяет определить исходные размеры и позицию виджета перед изменением.
  2. resize – срабатывает непрерывно в процессе изменения размеров. Используется для динамического обновления информации, например, размеров в реальном времени.
  3. resizestop – срабатывает после завершения изменения размера. Обычно применяется для сохранения новых размеров в состоянии приложения или на сервере.

Привязка событий к элементам

События изменения размеров можно привязывать как к отдельным элементам сетки, так и к самой сетке. Основные методы:

const grid = GridStack.init();

// Привязка к сетке
grid.on('resizestart', function(event, el) {
    console.log('Начало изменения размера виджета:', el);
});

grid.on('resize', function(event, el) {
    console.log('В процессе изменения:', el);
});

grid.on('resizestop', function(event, el) {
    console.log('Размер изменён:', el);
});

Параметры обработчиков:

  • event – стандартный объект события.
  • el – DOM-элемент виджета, размер которого изменяется.
  • node (дополнительно) – объект Gridstack, содержащий актуальные координаты и размеры виджета: {x, y, w, h, id}.

Пример с использованием node:

grid.on('resizestop', function(event, el, node) {
    console.log(`Виджет ID ${node.id} имеет новые размеры: ширина=${node.w}, высота=${node.h}`);
});

Использование событий для ограничения размеров

Gridstack.js позволяет задавать ограничения для виджетов через атрибуты или параметры minWidth, maxWidth, minHeight, maxHeight. В сочетании с событиями это даёт возможность динамически проверять и корректировать размеры.

grid.on('resize', function(event, el, node) {
    if (node.w > 6) node.w = 6; // ограничение ширины
    if (node.h < 2) node.h = 2; // минимальная высота
});

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

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

Один из типичных сценариев применения событий изменения размеров – сохранение состояния сетки после модификаций. Например, после завершения изменения размера можно обновлять локальное хранилище:

grid.on('resizestop', function(event, el, node) {
    const gridState = grid.save(); // сохраняем все виджеты и их позиции
    localStorage.setItem('gridState', JSON.stringify(gridState));
});

При загрузке страницы состояние можно восстановить:

const savedState = JSON.parse(localStorage.getItem('gridState'));
if (savedState) {
    GridStack.init().load(savedState);
}

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

  • Использовать resizestop для окончательного сохранения состояния, а resize – для динамических визуальных эффектов.
  • Обязательно проверять размеры через объект node, чтобы корректно применять ограничения.
  • Для сложных сеток с множеством виджетов рекомендуется минимизировать обработку событий в resize, чтобы не перегружать интерфейс.

Комбинация с другими событиями

События изменения размеров удобно комбинировать с перетаскиванием (drag) и добавлением/удалением виджетов (added, removed). Это позволяет строить полноценные динамические панели управления, где все изменения отслеживаются и синхронизируются.

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

grid.on('resizestop', function(event, el, node) {
    console.log('Обновляем состояние после изменения размера виджета ID', node.id);
});

Итоговая структура событий изменения размеров

Событие Момент срабатывания Основное применение
resizestart Начало изменения размера Сохранение исходных размеров
resize В процессе изменения Динамическое отображение размеров
resizestop После завершения изменения Сохранение состояния, обновление данных

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

Оглавление