out - выход из контейнера

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

Событие out и его назначение

Событие out вызывается, когда перетаскиваемый элемент покидает контейнер, из которого был взят. Это событие полезно для:

  • Контроля, какие элементы покинули исходный контейнер.
  • Выполнения операций очистки или визуальной обратной связи.
  • Ограничения перемещений, если требуется откат элемента в исходное место.

Сигнатура события:

drake.on('out', function(el, container, source) {
    // el — перетаскиваемый элемент
    // container — контейнер, из которого элемент выходит
    // source — тот же контейнер, что и container
});

Ключевые параметры:

  • el — DOM-элемент, который перемещается.
  • container — контейнер, который покидает элемент.
  • source — исходный контейнер (обычно совпадает с container).

Пример базового использования

const drake = dragula([document.querySelector('#left'), document.querySelector('#right')]);

drake.on('out', function(el, container, source) {
    console.log('Элемент покинул контейнер:', el);
    container.style.backgroundColor = '#f8d7da'; // визуальное выделение покинутого контейнера
});

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

Отличие out от других событий Dragula

Dragula предоставляет множество событий, связанных с перемещением элементов:

  • drag — элемент начинает перетаскиваться.
  • drop — элемент отпускается в контейнере.
  • over — элемент находится над контейнером.
  • out — элемент покидает контейнер.

Событие out срабатывает перед drop, когда элемент ещё не был размещён в новом контейнере. Это позволяет выполнить подготовительные действия, например скрыть подсказку или сбросить стили.

Практические сценарии применения out

  1. Визуальное выделение контейнера при уходе элемента
drake.on('out', function(el, container) {
    container.classList.remove('highlight');
});

Здесь при выходе элемента из контейнера убирается CSS-класс highlight, который мог подсвечивать контейнер во время перетаскивания.

  1. Логирование и аналитика
drake.on('out', function(el, container) {
    console.log(`Элемент ${el.id} покинул контейнер ${container.id}`);
});

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

  1. Ограничение перемещения

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

drake.on('out', function(el, container, source) {
    if (container.id === 'restricted') {
        source.appendChild(el);
    }
});

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

Особенности работы с вложенными контейнерами

Если контейнеры вложены друг в друга, событие out срабатывает только для контейнера, из которого реально выходит элемент, а не для всех родителей. Это важно учитывать при работе со сложной структурой DOM, чтобы не срабатывать на лишние события.

Стилизация при событии out

Dragula не ограничивает работу с CSS. Можно динамически менять:

  • Цвет фона (background-color)
  • Границы (border)
  • Тень (box-shadow)
  • Параметры прозрачности (opacity)

Пример:

drake.on('out', function(el, container) {
    container.style.opacity = '0.6';
    setTimeout(() => container.style.opacity = '1', 300);
});

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

Совмещение out с over и drop

Событие out лучше всего работает в связке с over и drop, чтобы отслеживать весь цикл перемещения:

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

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

drake.on('drop', function(el, target) {
    target.classList.add('dropped');
});

Такой подход позволяет создавать комплексные интерфейсы с наглядной обратной связью на действия пользователя.

Если требуется, могу продолжить и подробно разобрать взаимодействие события out с функциями accepts и invalid для более строгого контроля перемещений внутри Dragula. Это создаёт мощный инструмент для ограничения перетаскивания по правилам бизнес-логики.

Оглавление