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

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

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

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

  1. Метод removeWidget

    const grid = GridStack.init();
const el = document.querySelector('.grid-stack-item');
grid.removeWidget(el, true); // true — удалить DOM элемент полностью
    • Первый аргумент — элемент DOM виджета или его jQuery-объект.
    • Второй аргумент — булево значение, определяющее, будет ли элемент полностью удалён из DOM. По умолчанию false, что только убирает его из сетки, оставляя в DOM.

  2. Метод removeAll Удаляет все виджеты из сетки одновременно:

    grid.removeAll(true); // удаляет все виджеты с DOM

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

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

  • removed Срабатывает после того, как виджет был удалён из сетки (и, при необходимости, из DOM). Пример:

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

    Здесь items — массив объектов виджетов, которые были удалены, каждый из которых содержит:

    • el — DOM-элемент виджета
    • x, y, width, height — позиция и размеры виджета до удаления
    • id — идентификатор виджета, если он был установлен

  • Отслеживание удалений с помощью change Событие change срабатывает при любом изменении сетки, включая удаление, добавление или перемещение виджетов. Для фильтрации удалений:

    grid.on('change', function(event, items) {
    items.forEach(item => {
        if (item._removed) {
            console.log('Виджет помечен как удалён:', item.el);
        }
    });
});

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

Кастомизация процесса удаления

  1. Анимации удаления Можно обернуть удаление виджета в анимацию, чтобы плавно скрывать элемент перед удалением:

    const el = document.querySelector('.grid-stack-item');
el.classList.add('fade-out'); // CSS анимация
el.addEventListener('animationend', () => {
    grid.removeWidget(el, true);
});

  2. Обратные вызовы перед удалением Gridstack.js позволяет перехватывать событие удаления через пользовательские функции:

    function beforeRemove(el) {
    return confirm('Удалить виджет?');
}

grid.on('removed', function(event, items) {
    items.forEach(item => {
        if (!beforeRemove(item.el)) {
            grid.addWidget(item.el); // возвращаем виджет в сетку
        }
    });
});

  3. Удаление с серверной синхронизацией Часто необходимо удалить виджет и одновременно удалить запись на сервере:

    grid.on('removed', function(event, items) {
    items.forEach(item => {
        fetch(`/api/delete-widget/${item.id}`, { method: 'DELETE' });
    });
});

Особенности удаления при использовании drag-and-drop

Если виджет удаляется перетаскиванием за пределы сетки:

  • Включение опции removeTimeout:

    const grid = GridStack.init({
    removable: true,
    removeTimeout: 200 // миллисекунды до окончательного удаления
});
    • Виджет будет удалён через указанный интервал после того, как пользователь отпустит его вне сетки.
    • Можно использовать событие removed для выполнения финальной очистки.

  • Перетаскивание с откатом (revert) также влияет на удаление: если отменить удаление через revert, виджет останется в сетке.

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

  • Всегда использовать removed для логики после удаления, а не для проверки возможности удаления — для этого лучше отдельный колбэк перед удалением.
  • Для больших сеток рекомендуется использовать removeAll аккуратно, так как это может вызвать множественные события removed и нагрузку на DOM.
  • Если сетка синхронизируется с базой данных, обязательно учитывать асинхронность и ошибки сетевых запросов при удалении виджетов.

Итоговые возможности

События удаления в Gridstack.js позволяют:

  • Контролировать момент удаления виджета из сетки и DOM
  • Выполнять анимации и пользовательские проверки перед удалением
  • Синхронизировать состояние с сервером или локальным хранилищем
  • Отслеживать удаление через универсальное событие change

Эти инструменты обеспечивают полное управление динамическими виджетами и гибкую интеграцию с бизнес-логикой приложения.

Оглавление