Дистанция активации

В контексте библиотеки Shopify Draggable дистанция активации (activation distance) является ключевым параметром, определяющим, насколько пользователь должен переместить элемент, прежде чем инициируется процесс перетаскивания. Этот механизм предотвращает случайные срабатывания при обычном клике или тапе на элемент и обеспечивает точный контроль над UX взаимодействием.

Основные принципы работы

Когда пользователь нажимает на элемент, Draggable фиксирует начальные координаты курсора (clientX, clientY). Библиотека затем отслеживает перемещение курсора и вычисляет дистанцию между текущими координатами и точкой начала нажатия. Если эта дистанция превышает заданное значение activationDistance, элемент переходит в состояние dragging, и создается “клон” или вспомогательный элемент для перетаскивания. До достижения этого порога события drag не инициируются.

Формула расчета дистанции:

const distance = Math.sqrt(
  Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2)
);

Здесь currentX и currentY — текущие координаты курсора, startX и startY — координаты точки начала нажатия. Событие drag:start срабатывает только если distance >= activationDistance.

Настройка через опции Draggable

При создании экземпляра Draggable можно задать опцию delay и distance (или activationDistance в некоторых версиях):

import { Draggable } from '@shopify/draggable';

const container = document.querySelector('.draggable-container');

const draggable = new Draggable(container, {
  draggable: '.draggable-item',
  delay: 0, // задержка перед возможностью начала перетаскивания
  distance: 10 // дистанция активации в пикселях
});
  • delay — время в миллисекундах, которое должно пройти после нажатия, прежде чем будет возможен drag.
  • distance — минимальная дистанция перемещения для активации drag.

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

Влияние на пользовательский опыт

  • Малое значение дистанции (0–5 px) делает интерфейс очень чувствительным, но увеличивает риск случайного перетаскивания при кликах или скролле.
  • Большое значение дистанции (15–20 px и выше) снижает чувствительность, предотвращая случайные drag, но может создать ощущение “тяжелого” интерфейса, когда пользователь ожидает мгновенной реакции на движение.

Оптимальное значение зависит от типа устройства (мышь, сенсорный экран) и контекста использования (список товаров, сетка карточек, канбан-доска).

События, связанные с активацией

Draggable предоставляет события, которые позволяют отслеживать процесс активации:

  • drag:start — срабатывает после достижения дистанции активации и начала перетаскивания.
  • drag:move — вызывается при каждом изменении позиции элемента во время перетаскивания.
  • drag:stop — срабатывает после завершения drag.

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

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

1. Настройка чувствительности для карточек канбан-доски:

const kanbanDraggable = new Draggable(document.querySelectorAll('.kanban-column'), {
  draggable: '.kanban-card',
  distance: 8 // небольшая дистанция, чтобы drag начинался быстро
});

kanbanDraggable.on('drag:start', (event) => {
  event.source.classList.add('dragging');
});

kanbanDraggable.on('drag:stop', (event) => {
  event.source.classList.remove('dragging');
});

2. Защита от случайного drag при прокрутке списка на мобильном устройстве:

const listDraggable = new Draggable(document.querySelector('.mobile-list'), {
  draggable: '.list-item',
  distance: 12 // увеличиваем дистанцию для предотвращения срабатываний при скролле
});

Взаимодействие с другими опциями

Дистанция активации тесно связана с delay, mirror и handle:

  • delay + distance — позволяют создавать гибкую систему активации: сначала проверка задержки, затем проверка минимального движения.
  • mirror — клонируемый элемент создается только после активации, экономя ресурсы и предотвращая лишние DOM изменения.
  • handle — если используется, дистанция активации применяется только к области handle, что позволяет избежать случайного перетаскивания при кликах на дочерние элементы.

Рекомендации по выбору значения

  1. Мышь на десктопе: 5–10 px.
  2. Сенсорный экран: 10–15 px.
  3. Интерфейсы с плотными элементами: увеличение до 15–20 px для предотвращения случайного drag.
  4. Сложные интерфейсы с вложенными draggable: отдельная настройка для каждого уровня, чтобы избежать конфликта событий.

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

Оглавление