delayOnTouchOnly и touchStartThreshold

SortableJS — мощная библиотека для создания интерактивного перетаскивания элементов на странице. Важным аспектом её настройки является управление началом перетаскивания на устройствах с сенсорным экраном и мышью. Для этих целей используются параметры delayOnTouchOnly и touchStartThreshold, обеспечивающие гибкость и точность работы интерфейса.

delayOnTouchOnly

Параметр delayOnTouchOnly определяет, должна ли задержка перед началом перетаскивания применяться только для сенсорных устройств или для всех типов устройств (включая мышь).

Синтаксис:

new Sortable(list, {
    delay: 200,
    delayOnTouchOnly: true
});

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

  • true — задержка применяется только на устройствах с сенсорным экраном. Это предотвращает случайное начало перетаскивания при легком касании пальцем, при этом не замедляя работу на десктопе.
  • false — задержка действует на все устройства, включая мышь. Перетаскивание будет начинаться только после указанного времени задержки вне зависимости от способа взаимодействия.

Практическое значение:

  • На мобильных устройствах часто случаются случайные перетаскивания при скролле. Использование delayOnTouchOnly: true позволяет избежать этого.
  • На десктопе взаимодействие остаётся мгновенным, что повышает отзывчивость интерфейса.

touchStartThreshold

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

Синтаксис:

new Sortable(list, {
    touchStartThreshold: 5
});

Принцип работы:

  • Значение указывается в пикселях.
  • Перетаскивание начнётся только после того, как палец сместится от начальной точки касания на указанное количество пикселей.
  • Если палец движется меньше установленного порога, действие будет интерпретировано как обычное касание (например, скролл), а не перетаскивание.

Практическая ценность:

  • Помогает различать жесты прокрутки и перетаскивания.
  • Уменьшает количество ложных срабатываний при работе с длинными списками на мобильных устройствах.

Совместное использование delayOnTouchOnly и touchStartThreshold

Эти два параметра часто применяются вместе для точной настройки UX на сенсорных устройствах.

Пример настройки:

new Sortable(list, {
    delay: 150,               // задержка перед перетаскиванием
    delayOnTouchOnly: true,   // задержка применяется только на тач-устройствах
    touchStartThreshold: 10   // минимальное смещение пальца для начала перетаскивания
});

Эффект:

  1. На мобильных устройствах:

    • Перетаскивание не начнётся мгновенно при случайном касании.
    • Требуется как задержка, так и смещение пальца для активации перетаскивания.

  2. На десктопе:

    • Перетаскивание начинается мгновенно при захвате элемента мышью.
    • Смещение пальца не учитывается, что повышает отзывчивость интерфейса.

Рекомендации по настройке

  • Малые значения touchStartThreshold (1–5 px) подходят для интерфейсов, где пользователи должны быстро перемещать элементы.
  • Большие значения touchStartThreshold (10–20 px) применяются для длинных списков или при необходимости снизить случайные срабатывания на мобильных устройствах.
  • Задержка (delay) обычно устанавливается в диапазоне 100–300 мс.
  • delayOnTouchOnly: true предпочтительнее для гибридных интерфейсов, где пользователи работают как с мышью, так и с сенсорным экраном.

Особенности взаимодействия с другими параметрами SortableJS

  • filter: Если элементы фильтруются, touchStartThreshold и delayOnTouchOnly работают только с перетаскиваемыми элементами.
  • preventOnFilter: Не мешает работе порогов и задержки, но предотвращает нежелательные события при фильтрации элементов.
  • События (onStart, onMove, onEnd): Эти события могут быть использованы для динамической настройки delay или touchStartThreshold в зависимости от состояния приложения.

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

Оглавление