События start, move и end

Библиотека Interact.js предоставляет мощный и гибкий механизм для работы с интерактивными элементами на веб-странице. Одними из ключевых событий, определяющих жизненный цикл взаимодействия с элементом, являются start, move и end. Они позволяют отслеживать начало, процесс и завершение действий пользователя, таких как перетаскивание, масштабирование или вращение элементов.

Событие start

Событие start срабатывает в момент начала взаимодействия с элементом. Для элементов, поддерживающих drag, resize или gesturing, это первое событие в цепочке.

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

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        console.log('Начало перетаскивания', event.target);
        event.target.style.border = '2px solid blue';
      }
    }
  });

Ключевые моменты события start:

  • event.target — элемент, с которым начинается взаимодействие.
  • event.clientX и event.clientY — координаты указателя в момент начала.
  • Можно использовать для установки начального состояния, визуальной подсветки элемента или подготовки данных для дальнейшей обработки.

Событие move

Событие move срабатывает при каждом перемещении курсора или пальца пользователя во время взаимодействия. Оно позволяет реализовать динамическое перемещение или изменение элементов в реальном времени.

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

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    }
  });

Особенности события move:

  • event.dx и event.dy — смещения элемента относительно предыдущего события, а не от начальной позиции.
  • Событие срабатывает многократно, поэтому обработчики должны быть оптимизированы для высокой частоты вызовов.
  • Можно использовать для плавной анимации, ограничения перемещения по оси или создания привязок к сетке.

Событие end

Событие end срабатывает после завершения взаимодействия, когда пользователь отпускает элемент или прекращает жест. Оно позволяет завершить процесс, сохранить финальное состояние или инициировать дополнительные действия.

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

interact('.draggable')
  .draggable({
    listeners: {
      end(event) {
        console.log('Перетаскивание завершено', event.target);
        event.target.style.border = '';
      }
    }
  });

Особенности события end:

  • Позволяет очистить временные стили, классы или данные, установленные при start и move.
  • event.pageX и event.pageY содержат финальные координаты указателя на момент завершения.
  • Часто используется для вызова функций сохранения состояния, например, сохранение позиции элемента на сервере или в локальном хранилище.

Комбинирование событий

Для комплексных взаимодействий события start, move и end обычно применяются совместно, чтобы создать полноценный цикл взаимодействия. Это позволяет:

  • Устанавливать начальные параметры и визуальные эффекты при start.
  • Обновлять позицию, размеры или другие свойства во время move.
  • Завершать действие и фиксировать состояние при end.

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

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        event.target.style.opacity = 0.7;
      },
      move(event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      },
      end(event) {
        event.target.style.opacity = 1;
      }
    }
  });

Практические рекомендации

  • Оптимизация производительности: события move могут срабатывать десятки раз в секунду, поэтому любые тяжелые вычисления лучше минимизировать.
  • События на разных действиях: можно комбинировать draggable, resizable и gesturable, но обработчики должны корректно работать с различными типами событий.
  • Использование data-атрибутов: хранение текущих координат или состояний в data-* атрибутах помогает избегать глобальных переменных и упрощает управление состоянием элементов.
  • Управление стилями: добавление временных классов или inline-стилей в start и их удаление в end обеспечивает визуальную обратную связь пользователю.

События start, move и end являются фундаментальными для построения интерактивных интерфейсов с помощью Interact.js, обеспечивая полный контроль над жизненным циклом пользовательского взаимодействия с элементами.

Оглавление