TouchSensor

В библиотеке Shopify Draggable TouchSensor является специализированным сенсором, предназначенным для обработки событий касания на мобильных устройствах и планшетах. Он позволяет интегрировать drag-and-drop функциональность в интерфейсы, где управление мышью недоступно, обеспечивая плавность и отзывчивость взаимодействия с элементами на сенсорных экранах.

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

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

Ключевые моменты:

  • Поддержка multi-touch: сенсор умеет различать несколько касаний, но по умолчанию обрабатывается только одно активное.

  • События сенсора: при взаимодействии генерируются следующие события:

    • drag:start — начало перетаскивания;
    • drag:move — перемещение элемента;
    • drag:stop — завершение перетаскивания;
    • drag:over и drag:out — перемещение над или вне допустимой зоны.

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

Инициализация TouchSensor

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

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

const container = document.querySelector('.list');
const draggable = new Draggable(container, {
  draggable: '.item',
  sensors: [TouchSensor]
});

В этом примере TouchSensor позволяет перетаскивать элементы с классом .item внутри контейнера .list.

Настройка TouchSensor

TouchSensor поддерживает несколько опций:

  • delay — время в миллисекундах до начала перетаскивания. Полезно для предотвращения случайных срабатываний.
  • touchStartThreshold — минимальное смещение пальца в пикселях, чтобы инициировать drag.
  • activeClass — CSS-класс, добавляемый к элементу во время перетаскивания.

Пример конфигурации с настройками:

const draggable = new Draggable(container, {
  draggable: '.item',
  sensors: [
    {
      sensor: TouchSensor,
      options: {
        delay: 150,
        touchStartThreshold: 5,
        activeClass: 'is-dragging'
      }
    }
  ]
});

Взаимодействие с другими сенсорами

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

import { MouseSensor, TouchSensor } from '@shopify/draggable';

const draggable = new Draggable(container, {
  draggable: '.item',
  sensors: [MouseSensor, TouchSensor]
});

Обработка событий TouchSensor

События сенсора можно отслеживать с помощью стандартного механизма .on().

draggable.on('drag:start', (event) => {
  console.log('Начало перетаскивания:', event.source);
});

draggable.on('drag:move', (event) => {
  console.log('Перемещение:', event.sensorEvent.data);
});

draggable.on('drag:stop', (event) => {
  console.log('Завершение перетаскивания:', event.source);
});

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

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

  • Passive event listeners: рекомендуется использовать пассивные слушатели для предотвращения блокировки скролла при перетаскивании.
  • Учет масштаба и ориентации экрана: координаты касаний следует нормализовать с учетом масштабирования страницы и ориентации устройства.
  • Минимальные размеры зон касания: элементы перетаскивания должны быть достаточно крупными для комфортного взаимодействия пальцем.

Особенности поведения

  • Если элемент был захвачен пальцем, TouchSensor предотвращает стандартное поведение браузера, такое как скролл или выделение текста.
  • При использовании вместе с Sortable элементы можно переставлять в списках, а при необходимости TouchSensor можно отключать динамически через draggable.disable() и draggable.enable().

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

Сценарий: перетаскивание элементов списка с анимацией и динамическим изменением стилей.

const draggable = new Draggable(container, {
  draggable: '.item',
  sensors: [TouchSensor],
  classes: {
    dragging: 'is-dragging'
  }
});

draggable.on('drag:start', ({ source }) => {
  source.style.transition = 'none';
});

draggable.on('drag:move', ({ sensorEvent }) => {
  const { clientX, clientY } = sensorEvent.data.originalEvent.touches[0];
  // можно использовать clientX и clientY для кастомной анимации
});

draggable.on('drag:stop', ({ source }) => {
  source.style.transition = '';
});

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

TouchSensor — ключевой инструмент Shopify Draggable для создания отзывчивых drag-and-drop интерфейсов на сенсорных устройствах, обеспечивая гибкость и точность управления элементами без потери производительности.

Оглавление