Опции для сенсорных экранов

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

Сенсорное начало перетаскивания: touchStartThreshold

Описание: Параметр touchStartThreshold определяет минимальное смещение пальца по экрану (в пикселях), которое должно произойти, чтобы перетаскивание элемента активировалось. Без него на мобильных устройствах может происходить случайное срабатывание при простом касании.

Использование:

Sortable.create(list, {
  touchStartThreshold: 10
});

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

Ограничение горизонтального и вертикального перемещения: direction

Описание: Параметр direction позволяет задать направление сортировки элементов. Для сенсорных экранов это особенно полезно, чтобы предотвратить случайные сдвиги элементов в нежелательном направлении.

Опции:

  • "horizontal" — элементы перемещаются только по горизонтали.
  • "vertical" — элементы перемещаются только по вертикали.

Пример:

Sortable.create(list, {
  direction: "vertical"
});

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

Учет касаний в forceFallback

Описание: Параметр forceFallback заставляет SortableJS использовать fallback-метод перетаскивания, который полностью реализован на JavaScript. На сенсорных устройствах это предотвращает проблемы с drag-and-drop API браузеров, которые могут быть нестабильными на мобильных платформах.

Пример:

Sortable.create(list, {
  forceFallback: true
});

Ключевой момент: fallback-перетаскивание использует события touchmove и touchend, что обеспечивает более предсказуемое поведение на сенсорных экранах.

Настройка скорости отклика: delay и delayOnTouchOnly

Описание:

  • delay задает задержку перед началом перетаскивания (в миллисекундах).
  • delayOnTouchOnly применяет задержку только для сенсорных экранов.

Пример:

Sortable.create(list, {
  delay: 150,
  delayOnTouchOnly: true
});

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

Настройка мультитач: multiDrag и selectedClass

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

Пример:

Sortable.create(list, {
  multiDrag: true,
  selectedClass: 'selected'
});

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

Настройка касаний для исключения прокрутки: fallbackTolerance

Описание: Параметр fallbackTolerance задает допустимое смещение пальца, при котором drag-and-drop ещё не начнется. Это предотвращает конфликт между прокруткой страницы и перетаскиванием элемента.

Пример:

Sortable.create(list, {
  fallbackTolerance: 5
});

Ключевой момент: небольшое значение fallbackTolerance позволяет быстро начинать перемещение элементов, но слишком маленькое может мешать прокрутке страницы.

Поддержка сенсорного браузера: scroll и scrollSensitivity

Описание:

  • scroll позволяет включить автопрокрутку контейнера при перетаскивании элементов к его краям.
  • scrollSensitivity определяет расстояние от края, при котором активируется прокрутка.

Пример:

Sortable.create(list, {
  scroll: true,
  scrollSensitivity: 40
});

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

Резюме ключевых настроек для сенсорных экранов

  • touchStartThreshold — минимальное смещение для активации drag.
  • direction — ограничение перемещения по вертикали или горизонтали.
  • forceFallback — использование fallback для стабильного drag.
  • delay / delayOnTouchOnly — задержка начала перетаскивания.
  • multiDrag / selectedClass — поддержка выделения нескольких элементов.
  • fallbackTolerance — минимальное смещение перед началом drag для избежания конфликта с прокруткой.
  • scroll / scrollSensitivity — автопрокрутка контейнера при перетаскивании.

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

Оглавление