Поддержка touch-событий

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

Основы touch-событий

Touch-события в браузерах представлены несколькими ключевыми событиями:

  • touchstart — срабатывает при касании экрана;
  • touchmove — срабатывает при движении пальца по экрану;
  • touchend — срабатывает при отрыве пальца от экрана;
  • touchcancel — срабатывает, когда браузер отменяет событие касания (например, при появлении системного уведомления).

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

Инициализация Sortable с поддержкой touch

Для стандартного списка элементов достаточно использовать базовую инициализацию:

import Sortable from 'sortablejs';

const list = document.getElementById('sortable-list');

Sortable.create(list, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
});

SortableJS автоматически определяет сенсорное устройство и привязывает необходимые слушатели touch-событий. Ключевой момент — не требуется вручную регистрировать touchstart или touchmove, библиотека берет это на себя.

Настройка поведения для сенсорного ввода

Хотя поддержка touch-событий включена по умолчанию, иногда требуется точная настройка взаимодействия:

  • delay — задержка перед началом перетаскивания в миллисекундах. Полезно для предотвращения случайных срабатываний при прокрутке на мобильных устройствах.
Sortable.create(list, {
    delay: 100, // перетаскивание начнется через 100 мс удержания
    touchStartThreshold: 5 // минимальное смещение в пикселях для начала drag
});

  • touchStartThreshold — минимальное смещение пальца для начала drag, предотвращает конфликт с вертикальной прокруткой.

  • fallbackOnBody — опция для обхода проблем с ограниченными контейнерами на мобильных устройствах. Если установлено true, элемент, который перетаскивается, будет добавлен в <body> на время drag.

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

Пользовательские обработчики touch-событий

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

  • onStart(evt) — срабатывает при начале drag;
  • onEnd(evt) — срабатывает при завершении drag;
  • onMove(evt, originalEvent) — позволяет контролировать возможность перемещения элементов;
  • onChoose(evt) и onUnchoose(evt) — для отслеживания выбора элемента.

Пример отслеживания drag на мобильном устройстве:

Sortable.create(list, {
    onStart: function(evt) {
        console.log('Начало перетаскивания:', evt.item);
    },
    onEnd: function(evt) {
        console.log('Элемент перетащен в позицию:', evt.newIndex);
    },
    onMove: function(evt, originalEvent) {
        if (originalEvent.type.startsWith('touch')) {
            console.log('Touch движение:', originalEvent.touches[0].clientX, originalEvent.touches[0].clientY);
        }
    }
});

Особенности работы с мобильными браузерами

  1. Отмена масштабирования и скролла: Для корректного drag на мобильных устройствах рекомендуется использовать CSS:
body {
    touch-action: pan-y;
}

touch-action: pan-y; разрешает вертикальную прокрутку, но предотвращает конфликт с горизонтальным перетаскиванием.

  1. Проблемы с position: fixed: Если элемент с position: fixed находится в контейнере sortable, на мобильных устройствах могут появляться неожиданные смещения. Решается через fallbackOnBody или временную замену на position: absolute на время drag.

  2. Отслеживание мультитача: SortableJS игнорирует дополнительные пальцы по умолчанию, перетаскивая только один элемент. Для кастомной логики можно использовать события originalEvent.touches внутри onMove или onStart.

Оптимизация производительности на сенсорных устройствах

  • Уменьшение количества DOM-операций во время onMove. Частые манипуляции с DOM сильно тормозят на мобильных процессорах.
  • Использование CSS-анимаций вместо ручного изменения стилей через JS.
  • Минимизация слушателей событий на отдельных элементах — SortableJS уже оптимизирован для мобильного ввода, дополнительная привязка touch-обработчиков не рекомендуется.

Расширение функционала через плагины

SortableJS поддерживает плагины для мобильных устройств:

  • Swap Plugin — позволяет заменять элементы местами вместо стандартного drag.
  • MultiDrag Plugin — поддержка перетаскивания нескольких элементов на touch-устройствах.

Пример подключения MultiDrag:

import MultiDrag from 'sortablejs/plugins/MultiDrag';

Sortable.mount(new MultiDrag());

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

Это позволяет реализовать сложные интерфейсы на мобильных устройствах без конфликта с touch-событиями.

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

Оглавление