Комбинирование сенсоров

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

В Draggable сенсоры реализованы как отдельные классы, наследующиеся от базового класса Sensor. Каждый сенсор имеет свои методы и события, но при комбинировании важно правильно управлять их приоритетом и взаимодействием.

Основные типы сенсоров

  1. MouseSensor – реагирует на события мыши: mousedown, mousemove, mouseup.
  2. TouchSensor – отслеживает сенсорные события на мобильных устройствах: touchstart, touchmove, touchend.
  3. SortableSensor – обеспечивает сортировку элементов при перетаскивании.
  4. SwappableSensor – позволяет реализовать обмен элементов между контейнерами.

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

Подключение нескольких сенсоров

При инициализации Draggable можно указать массив сенсоров через опцию sensors:

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

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

Такой подход позволяет элементам реагировать на события как мыши, так и сенсорного экрана без дополнительной логики.

Управление событиями при комбинировании

Комбинированные сенсоры могут генерировать одни и те же события (drag:start, drag:move, drag:stop). Чтобы избежать конфликтов, важно использовать фильтрацию источников событий:

draggable.on('drag:start', (event) => {
  if (event.sensorEvent instanceof MouseEvent) {
    console.log('Перетаскивание с мыши');
  } else if (event.sensorEvent instanceof TouchEvent) {
    console.log('Перетаскивание с тачскрина');
  }
});

Использование sensorEvent позволяет определить источник события и корректно обрабатывать логику для разных устройств.

Создание собственного сенсора

Для реализации специфического поведения можно создавать пользовательские сенсоры, расширяя базовый класс Sensor:

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

class CustomSensor extends Sensor {
  constructor(container, options) {
    super(container, options);
    this.handleEvent = this.handleEvent.bind(this);
  }

  attach() {
    this.container.addEventListener('pointerdown', this.handleEvent);
  }

  detach() {
    this.container.removeEventListener('pointerdown', this.handleEvent);
  }

  handleEvent(event) {
    this.emit('drag:start', { sensorEvent: event });
  }
}

Такой сенсор можно добавить в массив sensors при инициализации Draggable. Это позволяет комбинировать стандартные сенсоры и пользовательские, обеспечивая гибкость интерфейса.

Особенности комбинирования сенсоров

  • Приоритет сенсоров: порядок в массиве sensors влияет на обработку событий. Первый сенсор получает событие первым, остальные могут его игнорировать.
  • Отмена событий: некоторые сенсоры могут вызывать event.preventDefault(), что влияет на работу остальных сенсоров. Рекомендуется проверять, какие события блокируются.
  • Согласованность координат: при использовании нескольких сенсоров необходимо синхронизировать координаты, чтобы перемещение элемента было плавным. Использование clientX и clientY из sensorEvent обеспечивает единый источник данных.
  • Совместимость с плагинами: комбинированные сенсоры полностью совместимы с плагинами Draggable, такими как Plugins.SwapAnimation и Plugins.SortAnimation.

Пример сложной конфигурации

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

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

draggable.on('drag:stop', (event) => {
  console.log(`Элемент перемещён: ${event.source.textContent}`);
});

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

Рекомендации при комбинировании

  • Использовать только необходимые сенсоры для минимизации накладных расходов.
  • Проверять порядок сенсоров в массиве для контроля приоритетов.
  • В пользовательских сенсорах всегда корректно реализовывать attach и detach, чтобы избежать утечек событий.
  • Проверять работу на разных устройствах: десктоп, планшет, мобильные.

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

Оглавление