Полный список событий

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

Основные категории событий

События Gridstack можно разделить на несколько групп:

  1. События перетаскивания (drag)
  2. События изменения размеров (resize)
  3. События добавления/удаления элементов (add, remove)
  4. События изменения состояния сетки (change, changeNode)

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

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

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

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

grid.on('dragstart', function(event, ui) {
    console.log('Начало перетаскивания', ui.node);
});

drag Событие срабатывает при каждом движении элемента. Позволяет отслеживать координаты в реальном времени и реализовать, например, динамическое позиционирование сопутствующих элементов.

dragstop Происходит в момент завершения перетаскивания. В этот момент элемент фиксируется на новом месте, а сетка пересчитывает расположение остальных виджетов.

grid.on('dragstop', function(event, ui) {
    console.log('Элемент перемещен', ui.node.x, ui.node.y);
});

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

resizestart Срабатывает при начале изменения размеров элемента. Можно использовать для установки ограничений или визуальных подсказок.

resize Происходит в процессе изменения размеров. Обеспечивает возможность динамически адаптировать контент внутри виджета.

resizestop Срабатывает по завершении изменения размеров. В этот момент новые размеры элемента фиксируются в структуре сетки.

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

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

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

grid.on('added', function(event, items) {
    items.forEach(function(node) {
        console.log('Добавлен новый элемент:', node.el);
    });
});

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

grid.on('removed', function(event, items) {
    items.forEach(function(node) {
        console.log('Удален элемент:', node.el);
    });
});

События изменения состояния сетки

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

grid.on('change', function(event, items) {
    items.forEach(function(node) {
        console.log('Изменен элемент:', node.id, 'новые координаты:', node.x, node.y);
    });
});

changeNode Отдельное событие для конкретного виджета. Срабатывает при изменении его позиции или размеров. Полезно для оптимизации работы при множественных изменениях, когда нужна реакция только на конкретный элемент.

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

Gridstack поддерживает взаимодействие с другими контейнерами через drag in/out:

  • dragin – элемент был перетащен внутрь сетки из внешнего контейнера.
  • dragout – элемент покидает сетку, перемещаясь в другой контейнер.

Эти события полезны для реализации интерфейсов с перемещением элементов между различными панелями.

Дополнительные события

  • dropped – срабатывает, когда элемент успешно размещен после перетаскивания.
  • addedremoved – объединяет события добавления и удаления для обработки любых изменений элементов в сетке.
  • changeViewport – срабатывает при изменении размера окна или контейнера, если используется адаптивная сетка.

Практические советы по работе с событиями

  • Использовать on вместо прямого назначения колбэка к каждому виджету для глобального управления событиями сетки.
  • Разделять события drag и resize для предотвращения конфликтов и излишних пересчетов.
  • Для динамически создаваемых элементов обязательно подписывать их на события после добавления.
  • Использовать ui.node для получения данных о позиции, размере и идентификаторе виджета, чтобы легко синхронизировать с сервером или другими компонентами интерфейса.

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

Оглавление