Тестирование событий

Gridstack.js предоставляет мощный набор событий для отслеживания действий с виджетами в сетке. Эти события позволяют реагировать на добавление, удаление, перемещение и изменение размеров элементов. Все события можно использовать с помощью стандартного синтаксиса Jav * aScript:

grid.on('eventName', function(event, element) {
    // обработка события
});

Где grid — объект сетки, eventName — название события, element — DOM-элемент виджета.

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

dragstart — возникает в момент начала перемещения виджета. Ключевые параметры:

  • el — DOM-элемент виджета.
  • node — объект Gridstack, описывающий положение и размеры: {x, y, w, h}.
grid.on('dragstart', function(event, el, node) {
    console.log('Начало перемещения:', node);
});

drag — событие вызывается на каждом шаге перемещения. Полезно для динамического отображения координат.

grid.on('drag', function(event, el, node) {
    console.log('Перемещение виджета:', node.x, node.y);
});

dragstop — срабатывает при завершении перемещения. Именно здесь удобно фиксировать новые координаты виджета в базе данных.

grid.on('dragstop', function(event, el, node) {
    console.log('Конец перемещения, новые координаты:', node);
});

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

resizestart — начало изменения размеров виджета. Позволяет сохранить исходные размеры перед изменением:

grid.on('resizestart', function(event, el, node) {
    console.log('Исходные размеры:', node.w, node.h);
});

resize — событие изменения размеров в процессе растягивания. Используется для динамического обновления интерфейса:

grid.on('resize', function(event, el, node) {
    console.log('Текущие размеры:', node.w, node.h);
});

resizestop — завершение изменения размеров. Здесь удобно сохранять новые размеры:

grid.on('resizestop', function(event, el, node) {
    console.log('Новые размеры:', node.w, node.h);
});

События добавления и удаления виджетов

added — возникает при добавлении нового виджета в сетку. Параметр nodes — массив объектов Gridstack для добавленных элементов.

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

removed — событие удаления виджета. Параметр nodes содержит объекты удаляемых виджетов.

grid.on('removed', function(event, nodes) {
    nodes.forEach(node => console.log('Удалён виджет:', node));
});

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

change — ключевое событие, срабатывающее при любых изменениях в сетке (перемещение или изменение размера). Параметр changes — массив объектов с информацией о виджетах:

grid.on('change', function(event, changes) {
    changes.forEach(change => {
        console.log(`Виджет ID ${change.id} изменился:`, change);
    });
});

Каждый объект change содержит:

  • x, y — новые координаты;
  • w, h — новые размеры;
  • el — DOM-элемент виджета.

Это событие удобно использовать для синхронизации данных между клиентом и сервером.

События фокуса и активации виджета

dropped — возникает при перетаскивании элемента из внешнего источника (draggable) в сетку. Позволяет динамически добавлять новые виджеты и сразу их конфигурировать.

grid.on('dropped', function(event, previousWidget, newWidget) {
    console.log('Виджет перенесён из внешнего источника:', newWidget);
});

activate / deactivate — события, используемые для визуального выделения активного виджета.

grid.on('activate', function(event, el) {
    el.classList.add('active-widget');
});

grid.on('deactivate', function(event, el) {
    el.classList.remove('active-widget');
});

Рекомендации по тестированию событий

  1. Использование консоли — быстрый способ отследить срабатывание событий и проверить правильность координат и размеров.
  2. Модульное тестирование — создавать отдельные функции-обработчики и тестировать их с фиктивными объектами Gridstack.
  3. Асинхронные операции — при сохранении данных на сервер использовать Promise или async/await внутри обработчиков dragstop и resizestop.
  4. Дебаунс событий — для drag и resize стоит применять дебаунс, чтобы избежать чрезмерного количества вызовов.

Практические советы

  • Для больших сеток change событие лучше использовать вместо отдельных dragstop и resizestop, чтобы минимизировать количество обработок.
  • События added и removed полезны для динамической генерации интерфейса и синхронизации с базой данных.
  • Комбинация событий dragstop и resizestop позволяет обеспечить точное позиционирование виджетов после завершения действий пользователя.

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

Оглавление