Работа с тенями и указателями

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

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

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

Ключевые классы:

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

Пример кастомизации тени:

.gu-mirror {
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border-radius: 4px;
    opacity: 0.95;
    transform: rotate(2deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gu-transit {
    opacity: 0.5;
}

В этом примере тень создаёт эффект приподнятого объекта, а лёгкая прозрачность и поворот делают движение более реалистичным.

Управление указателями и курсором

Dragula автоматически изменяет положение копии элемента в соответствии с положением курсора. Для дополнительной кастомизации можно использовать опции и события библиотеки.

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

  • drag — срабатывает при начале перетаскивания.
  • dragend — при завершении перетаскивания.
  • shadow — не является встроенным событием, но можно управлять CSS классами mirror для создания “тени” под курсором.

Пример использования события drag для изменения курсора и создания подсказки:

const drake = dragula([document.querySelector('#source'), document.querySelector('#target')]);

drake.on('drag', function(el) {
    el.classList.add('custom-shadow');
    document.body.style.cursor = 'grabbing';
});

drake.on('dragend', function(el) {
    el.classList.remove('custom-shadow');
    document.body.style.cursor = 'default';
});

В данном примере custom-shadow может содержать дополнительные эффекты, например, свечение или масштабирование элемента.

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

Для улучшения UX часто требуется ограничить движение элемента по определённой оси или внутри конкретного контейнера. Dragula предоставляет возможность управлять этим через опцию moves и добавление проверки координат мыши.

Пример ограничения движения по вертикали:

dragula([container], {
    moves: function(el, source, handle, sibling) {
        return true;
    },
    accepts: function(el, target, source, sibling) {
        // Ограничение: разрешено перемещать только внутрь target
        return target.id === 'target';
    },
    invalid: function(el, handle) {
        // Запрещаем перетаскивание по определённым элементам
        return handle.classList.contains('no-drag');
    }
});

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

.gu-over {
    border: 2px dashed #3498db;
    background-color: rgba(52, 152, 219, 0.1);
}

Динамическая адаптация тени и указателя

Иногда требуется изменять тень в зависимости от положения элемента над контейнером. Dragula не предоставляет встроенного API для этого, но можно использовать событие drag и текущие координаты мыши.

Пример:

drake.on('drag', function(el, source) {
    const rect = el.getBoundingClientRect();
    const offsetX = window.event.clientX - rect.left;
    const offsetY = window.event.clientY - rect.top;

    el.style.boxShadow = `${offsetX / 5}px ${offsetY / 5}px 20px rgba(0,0,0,0.4)`;
});

Такой подход создаёт эффект “динамической тени”, которая реагирует на положение курсора, усиливая визуальное ощущение глубины и движения.

Анимации при перетаскивании

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

.gu-mirror {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gu-transit {
    transition: opacity 0.2s ease;
}

Комбинация анимаций и динамических изменений позволяет создавать интуитивно понятное и визуально привлекательное перетаскивание.

Интеграция с другими библиотеками

Dragula легко интегрируется с CSS-фреймворками и анимационными библиотеками, такими как GSAP или Anime.js, для более сложных эффектов тени и указателей. События Dragula могут служить триггерами для запуска анимаций:

drake.on('drop', function(el, target, source, sibling) {
    gsap.to(el, { scale: 1, duration: 0.3, ease: "back.out(1.7)" });
});

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

Оглавление