drag:start и его данные

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

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

  • Тип события: CustomEvent
  • Момент срабатывания: при начале перетаскивания элемента
  • Доступ к данным: через объект события, который содержит информацию о текущем элементе, его контейнере, индексах и состоянии drag-сессии

Структура объекта события

Объект события drag:start включает несколько ключевых свойств:

  1. source – DOM-элемент, который пользователь начал перемещать.

    event.source // <div class="draggable-item">...</div>

  2. sourceContainer – контейнер, из которого элемент был взят.

    event.sourceContainer // <ul class="draggable-list">...</ul>

  3. originalEvent – исходное DOM-событие мыши или сенсорного устройства. Позволяет получать координаты, тип события (mousedown, touchstart) и другие свойства взаимодействия.

    event.originalEvent.clientX
event.originalEvent.clientY

  4. sensorEvent – объект, предоставляемый сенсорной системой Draggable, содержащий детали текущего drag-состояния. Включает:

    • position – текущие координаты перетаскиваемого элемента
    • delta – смещение относительно исходной позиции
    • source – тот же элемент, что и в event.source

  5. dragEvent – экземпляр события библиотеки, позволяющий контролировать дальнейшие действия, например отменить drag или изменить класс элемента.

Пример использования drag:start

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

const container = document.querySelector('.draggable-list');

const draggable = new Draggable(container, {
  draggable: '.draggable-item'
});

draggable.on('drag:start', (event) => {
  console.log('Начало перетаскивания элемента:', event.source);
  console.log('Исходный контейнер:', event.sourceContainer);
  console.log('Координаты мыши:', event.originalEvent.clientX, event.originalEvent.clientY);
  
  // Добавление визуального эффекта начала drag
  event.source.classList.add('is-dragging');
});

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

Важные моменты работы с данными

  1. source и sourceContainer всегда возвращают актуальные DOM-элементы, что позволяет манипулировать их стилями или содержимым сразу при начале drag.

  2. originalEvent полезно использовать для создания кастомных координатных логик или ограничения перемещения по определённой оси.

  3. sensorEvent.position обновляется динамически по мере движения мыши, но на этапе drag:start содержит начальные координаты, что важно для расчёта смещения элементов.

  4. Отслеживание drag:start удобно для:

    • изменения стилей перетаскиваемого элемента (opacity, transform)
    • логирования действий пользователя
    • подготовки данных для других связанных drag-событий (drag:move, drag:stop)

Советы по оптимизации

  • Не проводить тяжёлых вычислений в обработчике drag:start, чтобы не замедлять отклик интерфейса.
  • Добавлять CSS-классы для начала drag лучше через requestAnimationFrame, чтобы избежать мерцаний.
  • Использовать event.source.dataset для передачи метаданных элемента, которые понадобятся на следующих этапах drag-and-drop.

Расширенные возможности

Событие drag:start можно комбинировать с другими событиями Draggable, такими как drag:move и drag:stop, создавая цепочку реакций. Это позволяет, например:

  • Сразу при начале drag сохранять индекс элемента и содержимое для анимаций.
  • Создавать «placeholder» в контейнере, чтобы визуально показать, где элемент будет размещён.
  • Ограничивать перетаскивание по определённым контейнерам, проверяя sourceContainer.

Пример создания placeholder на drag:start:

draggable.on('drag:start', (event) => {
  const placeholder = document.createElement('div');
  placeholder.className = 'placeholder';
  event.sourceContainer.insertBefore(placeholder, event.source.nextSibling);
});

Итоговое понимание

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

Правильное использование данных drag:start обеспечивает плавность, предсказуемость и точность поведения перетаскивания элементов, создавая основу для всех последующих событий в цепочке drag-and-drop.

Оглавление