Кастомизация визуального отображения

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

Подключение и инициализация

Для начала работы Dragula необходимо подключить библиотеку. Обычно используется CDN или установка через npm:

<link rel="stylesheet" href="https://unpkg.com/dragula/dist/dragula.min.css">
<script src="https://unpkg.com/dragula/dist/dragula.min.js"></script>

Инициализация Dragula производится через вызов функции dragula() с массивом контейнеров:

const containers = [document.getElementById('left'), document.getElementById('right')];
const drake = dragula(containers);

На этом базовый функционал drag-and-drop готов, но для кастомизации визуального отображения потребуется работа с классами и событиями Dragula.

Работа с CSS-классами

Dragula автоматически добавляет к элементам определённые классы:

  • gu-transit — элемент в процессе перетаскивания;
  • gu-mirror — создается клон элемента, который следует за курсором;
  • gu-hide — временно скрывает исходный элемент при перетаскивании.

Эти классы можно использовать для кастомного стайлинга. Например, для создания эффекта затемнения исходного элемента:

.gu-transit {
    opacity: 0.5;
    border: 2px dashed #999;
}

.gu-mirror {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: rotate(2deg);
    border-radius: 4px;
}

Важно учитывать, что gu-mirror создается динамически, поэтому любые визуальные эффекты должны быть применены через CSS, а не через модификацию DOM после создания элемента.

Настройка поведения через события

Dragula предоставляет богатый набор событий, которые позволяют влиять на внешний вид элементов в процессе перетаскивания.

Основные события:

  • drag — срабатывает при начале перетаскивания;
  • dragend — при завершении перетаскивания;
  • drop — элемент был перемещён в новый контейнер;
  • over / out — курсор вошёл или покинул контейнер.

Пример изменения стиля контейнера при наведении:

drake.on('over', function (el, container) {
    container.style.backgroundColor = '#f0f0f0';
});

drake.on('out', function (el, container) {
    container.style.backgroundColor = '';
});

Таким образом, визуальные изменения могут динамически реагировать на действия пользователя.

Создание кастомного клона элемента

Иногда требуется полностью контролировать визуальное отображение перетаскиваемого объекта. Для этого используется функция moves и событие cloned.

const drake = dragula(containers, {
    copy: function (el, source) {
        return true; // создаем копию при перетаскивании
    },
    moves: function (el, source, handle) {
        return handle.classList.contains('handle'); // перетаскивание только за ручку
    }
});

drake.on('cloned', function (clone, original, type) {
    clone.style.backgroundColor = '#ffeeba';
    clone.style.border = '1px solid #ffcd39';
});

Функция copy определяет, создается ли новый элемент при перемещении. Событие cloned позволяет детально настроить визуальные свойства этого нового объекта.

Кастомизация курсора и визуальных эффектов

Для улучшения UX можно изменить внешний вид курсора и добавить анимации. Используется сочетание CSS и Dragula-событий:

.gu-mirror {
    cursor: grabbing;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
drake.on('drag', function (el) {
    el.style.transition = 'none'; // отключаем анимацию на исходном элементе
});

drake.on('dragend', function (el) {
    el.style.transition = '';
});

Такая комбинация обеспечивает плавный и визуально привлекательный drag-and-drop опыт.

Ограничение визуальных зон перетаскивания

Иногда требуется визуально обозначить зоны, куда можно помещать элемент, или, наоборот, запретить перемещение в определённые контейнеры. Для этого можно использовать событие over совместно с CSS:

drake.on('over', function (el, container) {
    if (container.id === 'forbidden') {
        container.style.backgroundColor = '#f8d7da';
    } else {
        container.style.backgroundColor = '#d4edda';
    }
});

drake.on('out', function (el, container) {
    container.style.backgroundColor = '';
});

Этот подход позволяет визуально разделять разрешённые и запрещённые зоны, повышая интуитивность интерфейса.

Динамическая кастомизация стиля элементов

Dragula допускает изменение стиля элементов в процессе всего жизненного цикла перетаскивания. Можно применять CSS-переменные или inline-стили для анимации размеров, цветов, прозрачности.

drake.on('drag', function (el) {
    el.style.opacity = '0.6';
    el.style.transform = 'scale(1.05)';
});

drake.on('dragend', function (el) {
    el.style.opacity = '';
    el.style.transform = '';
});

Такой подход позволяет создавать интерактивные эффекты, усиливая визуальное восприятие действий пользователя.

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

Оглавление