over - наведение на контейнер

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

Инициализация Dragula

Для начала работы необходимо подключить библиотеку Dragula и определить контейнеры, между которыми будет происходить перемещение элементов:

const containers = [
    document.getElementById('container1'),
    document.getElementById('container2')
];

const drake = dragula(containers);

Здесь создаётся объект drake, который отвечает за все операции drag-and-drop между указанными контейнерами. Важно помнить, что каждый контейнер должен быть DOM-элементом, иначе Dragula не сможет корректно отслеживать перемещение элементов.

Свойство over: наведение на контейнер

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

drake.on('over', function(el, container, source) {
    container.classList.add('over-highlight');
});

Параметры функции:

  • el — перетаскиваемый элемент.
  • container — контейнер, над которым находится элемент в текущий момент.
  • source — контейнер, из которого элемент был взят.

Ключевой момент: container и source могут совпадать, если элемент перемещается внутри одного контейнера. Это важно учитывать при логике подсветки или валидации перемещения.

Снятие эффекта при уходе из контейнера

Событие out работает в паре с over и срабатывает, когда элемент покидает контейнер. Обычно вместе с over используется для снятия визуального эффекта:

drake.on('out', function(el, container, source) {
    container.classList.remove('over-highlight');
});

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

Дополнительные возможности управления контейнерами

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

const drake = dragula(containers, {
    moves: function(el, source, handle, sibling) {
        return !el.classList.contains('no-drag');
    },
    accepts: function(el, target, source, sibling) {
        return !target.classList.contains('disabled-container');
    }
});
  • moves — определяет, какие элементы можно перетаскивать.
  • accepts — проверяет возможность помещать элемент в конкретный контейнер.

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

Практическое применение события over

  1. Визуальное выделение контейнера — улучшает UX, показывая, куда можно перемещать элементы.
  2. Предварительная проверка допустимости перемещения — можно динамически добавлять классы ошибок или блокировки.
  3. Анимации и эффекты — при наведении можно запускать CSS-анимации или изменение размеров контейнера.

Пример с анимацией:

drake.on('over', function(el, container) {
    container.style.transition = 'background-color 0.3s';
    container.style.backgroundColor = '#f0f8ff';
});

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

Работа с несколькими контейнерами

При работе с более чем двумя контейнерами событие over особенно полезно для определения, над каким контейнером сейчас находится элемент. Это позволяет:

  • Подсвечивать контейнеры независимо друг от друга.
  • Фильтровать элементы по типу контейнера.
  • Реализовывать сложные схемы перетаскивания, например, «разделение по категориям».
drake.on('over', function(el, container) {
    if (container.id === 'important-container') {
        container.classList.add('highlight-important');
    } else {
        container.classList.add('highlight-normal');
    }
});

Заключение по событию over

Событие over является фундаментальным для построения интерфейсов с перетаскиванием. Оно отвечает за момент наведения элемента на контейнер, позволяет динамически изменять визуальные состояния и комбинируется с функциями moves и accepts для создания гибкой логики drag-and-drop.

Использование over вместе с out и конфигурацией контейнеров обеспечивает полный контроль над поведением элементов при наведении и облегчает создание интерактивных, отзывчивых интерфейсов.

Оглавление