dragend - завершение перетаскивания

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

Основные особенности dragend

  • Триггер один раз на завершение перетаскивания: вне зависимости от того, произошло ли перемещение элемента в другой контейнер или остался на месте.
  • Доступ к элементу и контейнеру: объект события предоставляет ссылку на перетаскиваемый элемент (el) и на исходный контейнер (source), что позволяет выполнить любые операции с DOM.
  • Совместимость с другими событиями Dragula: dragend вызывается после событий drag и drop, что обеспечивает контроль над процессом от начала до конца.

Подключение события

Событие dragend добавляется через метод .on() объекта Dragula:

const drake = dragula([container1, container2]);

drake.on('dragend', function(el) {
    console.log('Элемент завершил перетаскивание:', el);
    el.style.backgroundColor = ''; // убираем временные стили
});

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

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

  1. Очистка временных стилей Во время перетаскивания Dragula добавляет элементу класс gu-transit и инлайн-стили для позиционирования. После завершения перетаскивания необходимо удалить эти стили, чтобы элемент вернулся к нормальному отображению.
drake.on('dragend', function(el) {
    el.classList.remove('gu-transit');
    el.style.transform = '';
    el.style.transition = '';
});
  1. Синхронизация порядка элементов После изменения позиции элемента часто требуется обновить массив данных, соответствующий новому порядку DOM-элементов.
drake.on('dragend', function() {
    const updatedOrder = Array.from(container1.children).map(el => el.dataset.id);
    console.log('Новый порядок элементов:', updatedOrder);
});
  1. Логирование и аналитика Событие dragend можно использовать для отслеживания действий пользователя, например, фиксации перемещений в интерфейсе или отправки событий на сервер.
drake.on('dragend', function(el, target, source) {
    fetch('/analytics', {
        method: 'POST',
        body: JSON.stringify({
            elementId: el.dataset.id,
            sourceContainer: source.id,
            targetContainer: target ? target.id : null
        }),
        headers: { 'Content-Type': 'application/json' }
    });
});

Отличия от drop и drag

  • drag: срабатывает при начале перетаскивания.
  • drop: срабатывает только если элемент был перемещён в другой контейнер.
  • dragend: срабатывает всегда при завершении перетаскивания, даже если элемент вернулся на место.

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

Советы по использованию

  • Убедиться, что все временные классы и стили, добавленные Dragula, удаляются в обработчике dragend.
  • Использовать dragend для окончательной синхронизации состояния интерфейса и данных.
  • Не полагаться на dragend для изменения позиции элемента в DOM — для этого используется drop. dragend служит именно завершающим сигналом о прекращении взаимодействия.

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

const drake = dragula([list1, list2]);

drake.on('drag', function(el) {
    el.style.opacity = '0.5';
});

drake.on('drop', function(el, target, source, sibling) {
    console.log(`Элемент перемещён в контейнер ${target.id}`);
});

drake.on('dragend', function(el) {
    el.style.opacity = '';
    el.classList.remove('gu-transit');
    console.log('Перетаскивание завершено для элемента', el.dataset.id);
});

В этом примере видна последовательность событий: изменение стиля при drag, фиксация позиции при drop и восстановление внешнего вида при dragend. Это демонстрирует полное управление процессом перетаскивания с учётом всех этапов.

Заключительные наблюдения по dragend

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

Оглавление