copy - режим копирования

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

Включение режима копирования

Для активации копирования используется опция copy при инициализации Dragula:

const drake = dragula([container1, container2], {
    copy: true
});

При таком подходе перетаскивание из одного контейнера в другой не удаляет элемент из исходного контейнера, а создаёт его точную копию.

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

const drake = dragula([container1, container2], {
    copy: function(el, source) {
        return el.classList.contains('copyable');
    }
});

В этом примере копируются только элементы с классом copyable. Остальные элементы будут перемещаться обычным образом.

Управление копиями

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

События, влияющие на копирование:

  • cloned: вызывается при создании копии. Позволяет изменять клон перед вставкой.
drake.on('cloned', function(clone, original, type) {
    clone.style.backgroundColor = 'lightyellow';
});
  • drop: срабатывает при окончательном отпускании элемента в контейнере. Можно проверить, что клон был вставлен, и выполнить дополнительные действия.
drake.on('drop', function(el, target, source, sibling) {
    if (source !== target) {
        console.log('Элемент скопирован в новый контейнер');
    }
});

Сочетание с другими настройками

  1. revertOnSpill При копировании удобно включить возврат при неправильном отпускании элемента:
const drake = dragula([container1, container2], {
    copy: true,
    revertOnSpill: true
});

Если клон отпущен вне целевого контейнера, он исчезнет, а оригинал останется на месте.

  1. accepts Позволяет ограничить, какие элементы могут быть помещены в контейнер:
const drake = dragula([container1, container2], {
    copy: true,
    accepts: function(el, target, source, sibling) {
        return target.id === 'target-container';
    }
});

В этом примере копии могут попадать только в контейнер с ID target-container.

Особенности DOM и стилей

  • Копии наследуют все inline-стили и атрибуты, но классы можно модифицировать через событие cloned.
  • Dragula автоматически добавляет к перетаскиваемому элементу класс gu-transit на время перетаскивания. Этот класс применим к клонам точно так же, как и к оригиналу.
  • Для больших списков рекомендуется использовать CSS-анимации, чтобы визуально разграничивать оригинал и копию.

Практические сценарии

  • Панель инструментов: пользователь перетаскивает элементы из библиотеки компонентов в рабочую область. Копирование позволяет оставлять исходные элементы для повторного использования.
  • Шаблонные списки: создание множества одинаковых карточек или блоков без удаления оригиналов.
  • Интерфейс выбора: элементы доступны для перемещения в разные категории, но исходные позиции остаются нетронутыми.

Ошибки и тонкости

  1. Если copy не задан или равен false, элементы будут перемещаться, а не копироваться.
  2. Использование функции в copy важно для сложных интерфейсов: позволяет делать копирование выборочным.
  3. В некоторых браузерах при сложных вложенных элементах клон может требовать дополнительного сброса событий или атрибутов, чтобы избежать конфликта идентификаторов (id).

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

  • copy: true — простое копирование всех элементов.
  • copy: function(el, source) — выборочное копирование.
  • Использовать cloned для изменения стиля или атрибутов клона.
  • Контролировать вставку через accepts.
  • Предусмотреть revertOnSpill для удобного UX.

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

Оглавление