События изменения элементов

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

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

Основные события, связанные с перемещением элементов:

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

Примечание: el.gridstackNode содержит актуальные координаты и размеры элемента после завершения перемещения.

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

Изменение размеров элемента также отслеживается отдельными событиями:

resizestart — инициируется в момент начала изменения размера. Можно использовать для проверки ограничений размеров или подготовки интерфейса к адаптации.
```
grid.on('resizestart', function(event, el) {
    console.log('Начало изменения размера:', el);
});
```
resize — срабатывает на каждом шаге изменения размеров. Позволяет обновлять элементы интерфейса в реальном времени или производить валидацию.
```
grid.on('resize', function(event, el) {
    let node = el.gridstackNode;
    console.log(`Текущий размер: w=${node.w}, h=${node.h}`);
});
```
resizestop — вызывается после окончания изменения размеров. Оптимально для сохранения нового размера в конфигурации или базе данных.
```
grid.on('resizestop', function(event, el) {
    let node = el.gridstackNode;
    console.log(`Элемент изменён: ширина=${node.w}, высота=${node.h}`);
});
```

Получение данных элемента

Каждый элемент сетки хранит состояние в объекте GridItem:

let node = el.gridstackNode;
console.log(node.x, node.y, node.w, node.h, node.id);

x, y — координаты элемента в сетке
w, h — размеры в ячейках
id — уникальный идентификатор элемента

Эти данные актуализируются после завершения операций перемещения или изменения размеров.

Программное обновление элемента

Gridstack.js позволяет изменять координаты и размеры элемента через API:

grid.update(el, {x: 2, y: 3, w: 4, h: 2});

При этом автоматически срабатывают соответствующие события (dragstop или resizestop), если элемент действительно изменил состояние.

Ограничение действий

Для контроля поведения элементов можно использовать опции сетки и атрибуты элемента:

minWidth, maxWidth, minHeight, maxHeight — ограничения размеров
noMove, noResize — запрет перемещения или изменения размеров

Пример:

grid.addWidget('<div class="grid-stack-item"></div>', {
    x: 0, y: 0, w: 2, h: 2,
    noMove: false,
    noResize: false,
    minW: 1, maxW: 4,
    minH: 1, maxH: 3
});

Эти ограничения автоматически применяются к событиям drag и resize, предотвращая выход элемента за заданные рамки.

Использование групповых событий

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

change — срабатывает при любом изменении положения или размера виджетов
added / removed — события добавления или удаления элементов

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

grid.on('change', function(event, items) {
    items.forEach(node => {
        console.log(`Элемент ${node.id} изменился: x=${node.x}, y=${node.y}, w=${node.w}, h=${node.h}`);
    });
});

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

События пользовательских действий

Gridstack.js также поддерживает интеграцию с пользовательскими событиями, такими как двойной клик или контекстное меню на виджете. Для этого можно использовать стандартные события DOM вместе с API Gridstack:

el.addEventListener('dblclick', () => {
    let node = el.gridstackNode;
    console.log(`Двойной клик на элементе ${node.id}`);
});

Комбинация событий DOM и событий Gridstack обеспечивает полный контроль над поведением элементов в сетке.

Оптимизация производительности

При работе с большим количеством элементов важно учитывать:

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

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