revertOnSpill - возврат при отмене

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

Основное назначение

Опция revertOnSpill отвечает за автоматический возврат элемента на его исходное место в случае, если он был «брошен» за пределами допустимой зоны. В Dragula под «spill» понимается ситуация, когда элемент отпущен вне контейнера, поддерживающего перетаскивание. Без этой опции элемент останется на месте отпускания, что не всегда соответствует логике интерфейса.

Тип значения: boolean

  • true — элемент возвращается на исходное место при неудачном перетаскивании.
  • false — элемент остается там, где был отпущен пользователем.
dragula([container1, container2], {
    revertOnSpill: true
});

В этом примере элементы автоматически возвращаются в исходный контейнер, если их отпустили вне container1 и container2.

Взаимодействие с событиями

revertOnSpill тесно связана с системой событий Dragula. Основные события, влияющие на поведение возврата:

  • drag — срабатывает при начале перетаскивания. Позволяет получить доступ к исходному контейнеру и элементу.
  • drop — срабатывает, когда элемент успешно помещен в контейнер. Возврат не происходит.
  • cancel — срабатывает при отмене перетаскивания, например, при отпускании элемента вне контейнеров. Именно это событие и триггерит поведение revertOnSpill.

При включенной опции revertOnSpill Dragula автоматически «откатывает» DOM-структуру до состояния до начала перетаскивания, избегая необходимости писать дополнительный код для возврата.

Настройка для отдельных контейнеров

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

dragula([container1, container2, container3], {
    revertOnSpill: true,
    accepts: function (el, target, source, sibling) {
        return target !== container3; // запрещаем перемещение в container3
    }
});

В данном случае элементы могут свободно перемещаться между container1 и container2. Попытка бросить их в container3 приведет к срабатыванию механизма возврата.

Взаимодействие с CSS и анимацией

Возврат элемента не происходит мгновенно. Dragula добавляет классы для плавной анимации:

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

Когда revertOnSpill активна, Dragula автоматически возвращает элемент с помощью анимации, используя CSS-переходы, если они заданы. Для управления скоростью можно использовать:

.gu-mirror, .gu-transit {
    transition: transform 0.3s ease;
}

Это делает возврат плавным и визуально приятным.

Совместное использование с другими опциями

revertOnSpill хорошо сочетается с такими опциями, как:

  • copy — при копировании элементов оригинал также возвращается, если элемент был «брошен» вне контейнера.
  • removeOnSpill — если включена одновременно с revertOnSpill, поведение при броске вне контейнера нужно контролировать: removeOnSpill удаляет элемент, revertOnSpill возвращает его. Dragula учитывает приоритет: возврат имеет преимущество, если обе опции активны.
dragula([container1, container2], {
    copy: true,
    revertOnSpill: true
});

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

Практические рекомендации

  • Использовать revertOnSpill в интерфейсах, где важно сохранить порядок элементов или предотвратить потерю данных.
  • Для сложных интерфейсов с множеством контейнеров комбинировать с accepts, чтобы задать точные правила допустимых перемещений.
  • Настроить CSS-анимацию для плавного визуального отката, улучшая пользовательский опыт.
  • Проверять совместимость с другими опциями Dragula, чтобы избежать конфликтов при удалении, копировании и возврате элементов.

Примеры применения

  1. Список задач (To-Do): элементы можно перемещать между колонками «В процессе» и «Готово», но бросок вне колонок возвращает задачу на исходную позицию.
  2. Сортировка элементов: для перестановки элементов в таблице или списке возвращение гарантирует сохранение структуры данных.
  3. Перетаскивание с ограниченными зонами: когда элемент нельзя разместить в определенных контейнерах, возврат предотвращает некорректные операции.

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

Оглавление