Кастомизация через CSS

Библиотека Shopify Draggable предоставляет мощный инструмент для реализации перетаскивания элементов на странице, но внешний вид и анимации поведения элементов полностью зависят от CSS. Для качественной кастомизации необходимо понимать, какие классы и состояния добавляются библиотекой и как их можно использовать для стилизации.

Классы состояния элементов

Draggable автоматически применяет несколько CSS-классов к элементам в зависимости от их состояния в процессе перетаскивания:

  • .draggable-source – присваивается исходным элементам, которые могут быть перемещены. Используется для задания начального вида элементов.

  • .draggable-source--is-dragging – добавляется элементу в момент активного перетаскивания. Позволяет визуально выделять перемещаемый объект (например, изменять прозрачность, добавлять тень или трансформацию).

  • .draggable-source--is-moving – активен во время перемещения, отличается от состояния --is-dragging тем, что может использоваться для динамических анимаций при смещении.

  • .draggable-container--is-over – применим к контейнеру, когда перетаскиваемый элемент находится над ним. Позволяет менять стиль зоны, куда возможно размещение элемента (например, подсветка или изменение границы).

  • .draggable-mirror – создается библиотекой как визуальная копия перемещаемого элемента, которая следует за курсором. Этот элемент можно стилизовать отдельно для более выразительных эффектов перемещения.

Настройка внешнего вида элементов

Перетаскиваемые элементы

Исходный элемент можно стилизовать так, чтобы он выглядел интерактивно даже в неподвижном состоянии:

.draggable-source {
    cursor: grab;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border-radius: 6px;
    background-color: #f9f9f9;
}

Эффект перетаскивания

Чтобы подчеркнуть активное перетаскивание, можно использовать комбинацию box-shadow, scale и opacity:

.draggable-source--is-dragging {
    cursor: grabbing;
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Отображение зоны перемещения

Контейнер, принимающий элементы, можно подсветить при наведении перемещаемого объекта:

.draggable-container--is-over {
    border: 2px dashed #0074d9;
    background-color: #e6f0ff;
}

Стили зеркала (mirror)

Элемент-миррор создается динамически и его можно использовать для создания плавного и реалистичного эффекта перетаскивания:

.draggable-mirror {
    pointer-events: none;
    position: fixed;
    z-index: 1000;
    transform: translate3d(0, 0, 0);
    transition: transform 0.1s ease;
    opacity: 0.9;
}

Использование CSS-переменных и темизации

Для больших проектов удобно использовать CSS-переменные для унификации стилей Draggable:

:root {
    --draggable-bg: #f9f9f9;
    --draggable-dragging-scale: 1.05;
    --draggable-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.draggable-source {
    background-color: var(--draggable-bg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable-source--is-dragging {
    transform: scale(var(--draggable-dragging-scale));
    box-shadow: var(--draggable-shadow);
}

Это позволяет быстро менять тему перетаскивания без правки каждого правила отдельно.

Анимации и переходы

Для плавного взаимодействия с пользователем рекомендуется использовать CSS-переходы и анимации на все изменяемые свойства:

  • transform – идеален для перемещений и масштабирования без потери производительности.
  • opacity – для мягкого появления и исчезания.
  • box-shadow – для эффекта глубины при перетаскивании.
.draggable-source {
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.25s ease;
}

Совмещение с пользовательскими классами

Draggable поддерживает возможность добавления своих классов через опции при инициализации. Это позволяет создавать уникальные эффекты без модификации стандартных классов:

const draggable = new Draggable.Draggable(container, {
    draggable: '.custom-draggable',
    mirror: {
        constrainDimensions: true
    }
});

CSS для кастомных классов:

.custom-draggable {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
}

.custom-draggable--is-dragging {
    border-color: #0074d9;
    background-color: #dceeff;
}

Приемы сложной кастомизации

  1. Слой анимации на зеркало – отдельная анимация для .draggable-mirror позволяет создать эффект “прыжка” или “тягучести” при перемещении.
  2. Комбинация псевдоэлементов – можно использовать ::before и ::after для добавления декоративных элементов при перетаскивании.
  3. Адаптивная визуализация – стили .draggable-source и .draggable-mirror можно менять в зависимости от размера экрана через медиазапросы.
@media (max-width: 768px) {
    .draggable-source--is-dragging {
        transform: scale(1.02);
    }
}

Эти техники обеспечивают гибкую и высококачественную кастомизацию интерфейсов с Draggable, позволяя создавать профессиональный и отзывчивый UX.

Оглавление