gu-transit - элемент в процессе перетаскивания

В библиотеке Dragula объект gu-transit играет ключевую роль в процессе визуального перемещения элементов между контейнерами. Этот элемент создается динамически при начале перетаскивания и служит визуальным представлением элемента, который пользователь перемещает. Он обеспечивает плавность интерфейса и отделяет исходный DOM-элемент от его визуальной копии во время операции drag-and-drop.

Создание и свойства gu-transit

Когда пользователь инициирует перетаскивание, Dragula автоматически выполняет следующие действия:

  1. Копирует исходный элемент DOM.
  2. Присваивает копии класс gu-transit.
  3. Добавляет копию в документ поверх других элементов.
  4. Применяет inline-стили, которые фиксируют позицию элемента относительно курсора.

Ключевые особенности gu-transit:

  • Независимость от исходного DOM-элемента — перемещение не влияет на оригинальный узел до момента завершения drag-and-drop.
  • Стилизация — библиотека задает стили position: absolute, pointer-events: none, чтобы элемент можно было перемещать без блокировки событий.
  • Адаптивность к контейнерам — gu-transit может пересекать границы контейнеров, что позволяет создавать визуальный эффект перетаскивания между списками или панелями.

Управление gu-transit через Dragula API

В Dragula есть события, которые позволяют контролировать появление и удаление gu-transit:

  • drag — срабатывает в момент начала перетаскивания. Внутри обработчика можно изменить стили gu-transit:
drake.on('drag', function(el, source) {
    const transit = document.querySelector('.gu-transit');
    transit.style.boxShadow = '0 5px 15px rgba(0,0,0,0.3)';
});
  • cloned — срабатывает, когда элемент дублируется для gu-transit. Позволяет подменять содержимое копии или применять дополнительные классы.
  • dragend — удаляет gu-transit из DOM после завершения операции. Это ключевой момент: оригинальный элемент возвращается в контейнер, либо перемещается в новый, а временная копия исчезает.

Взаимодействие с исходным элементом

gu-transit не является полноценной заменой перетаскиваемого элемента — это временный визуальный индикатор. Его свойства и поведение определяются исключительно Dragula, но возможно взаимодействие с ним через DOM:

  • Получение текущих координат относительно окна:
const transit = document.querySelector('.gu-transit');
const rect = transit.getBoundingClientRect();
console.log(rect.top, rect.left);
  • Изменение стилей в реальном времени для создания эффектов, таких как прозрачность или масштабирование:
transit.style.transform = 'scale(1.05)';
transit.style.opacity = '0.8';

Продвинутые возможности

  • Анимации перемещения — класс gu-transit позволяет добавлять CSS-переходы для плавного перемещения. Например, можно использовать transition: all 0.2s ease-in-out; для сглаживания движения.
  • Динамическая подстановка контента — иногда полезно менять содержимое gu-transit для создания визуальной подсказки, например, отображать количество выбранных элементов при групповой перетаскивании.
  • Изменение z-index — gu-transit всегда размещается поверх других элементов. Управление z-index позволяет обеспечить корректное наложение поверх модальных окон или других UI-элементов.

Практические примеры

  1. Перетаскивание с эффектом затемнения оригинала:
drake.on('drag', function(el) {
    el.style.opacity = '0.5';
});
drake.on('dragend', function(el) {
    el.style.opacity = '1';
});
  1. Изменение размеров gu-transit для имитации увеличения при перемещении:
drake.on('drag', function(el) {
    const transit = document.querySelector('.gu-transit');
    transit.style.transform = 'scale(1.1)';
});
  1. Смена цвета фона при наведении на контейнер:
drake.on('over', function(el, container) {
    const transit = document.querySelector('.gu-transit');
    transit.style.backgroundColor = 'lightblue';
});

gu-transit является важным инструментом для создания интерактивных и визуально привлекательных интерфейсов с помощью Dragula. Его правильное использование позволяет отделять визуальную часть перетаскивания от реального DOM, улучшая отзывчивость и гибкость работы с элементами.

Оглавление