События: onDrag, onDragStart, onDragEnd

GSAP (GreenSock Animation Platform) предоставляет мощные инструменты для работы с анимацией и интерактивностью в браузере. Одним из ключевых модулей является Draggable, который позволяет управлять элементами с помощью мыши или сенсорного ввода. Для тонкой настройки поведения элементов при перетаскивании используются события onDrag, onDragStart и onDragEnd.

onDragStart

Событие onDragStart срабатывает в момент начала перетаскивания элемента. На этом этапе можно:

  • Инициализировать дополнительные данные для анимации.
  • Включать или отключать определённые обработчики.
  • Менять визуальные свойства элемента, например, добавлять тень или масштаб для эффекта нажатия.

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

Draggable.create("#box", {
  type: "x,y",
  onDragStart: function() {
    console.log("Начало перетаскивания:", this.target);
    this.target.style.boxShadow = "0 10px 20px rgba(0,0,0,0.3)";
  }
});

Особенности:

  • this.target — ссылка на DOM-элемент, который перетаскивается.
  • this.startX и this.startY — координаты начала перетаскивания.
  • Использование GSAP-анимаций внутри onDragStart позволяет плавно изменять состояние элемента при начале перетаскивания.

onDrag

Событие onDrag вызывается каждый раз, когда элемент изменяет своё положение во время перетаскивания. Оно идеально подходит для:

  • Реализации следящих эффектов.
  • Синхронизации с другими анимациями или элементами на странице.
  • Ограничения перемещений на лету (например, с проверкой границ контейнера).

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

Draggable.create("#box", {
  type: "x,y",
  onDrag: function() {
    console.log("Текущее положение:", this.x, this.y);
    // Ограничение движения по оси X
    if (this.x < 0) this.x = 0;
    if (this.x > 500) this.x = 500;
  }
});

Особенности:

  • Событие вызывается с высокой частотой, поэтому тяжелые операции внутри onDrag могут снижать производительность.
  • this.x и this.y отражают текущие координаты относительно исходного положения.
  • Можно применять плавные GSAP-анимации к связанным элементам на основе текущего положения.

onDragEnd

Событие onDragEnd срабатывает в момент отпускания элемента. Оно используется для:

  • Завершения анимационных эффектов.
  • Сброса временных стилей, добавленных в onDragStart.
  • Реализации “притягивания” к определённым точкам (snap) или возврата элемента на исходную позицию.

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

Draggable.create("#box", {
  type: "x,y",
  onDragEnd: function() {
    console.log("Перетаскивание завершено");
    gsap.to(this.target, {boxShadow: "0 0 0 rgba(0,0,0,0)", duration: 0.3});
    // Возврат к исходной позиции
    gsap.to(this.target, {x: 0, y: 0, duration: 0.5, ease: "power2.out"});
  }
});

Особенности:

  • Событие срабатывает один раз при завершении перетаскивания.
  • Можно использовать инерцию и snap-to-grid через интеграцию с дополнительными плагинами GSAP.
  • Позволяет реализовать сложные интерактивные сценарии: например, свайп-карточки, draggable-меню, редакторы графики.

Рекомендации по работе с событиями drag

  1. Минимизировать нагрузку в onDrag: не выполнять сложные вычисления внутри события, вместо этого хранить координаты и обновлять анимацию с помощью gsap.ticker.
  2. Сохранять состояние элемента: использовать свойства this.startX, this.startY, this.x, this.y для корректного расчёта анимаций и ограничений.
  3. Комбинировать события: часто логика перетаскивания строится через связку onDragStart → onDrag → onDragEnd, чтобы обеспечить плавный визуальный эффект и контроль поведения элемента.
  4. Использовать GSAP-анимации для визуальных эффектов: прямое изменение стилей через style возможно, но использование gsap.to() обеспечивает плавность и согласованность с другими анимациями.

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

  • Snap-позиции: с помощью функции snap можно автоматически привязывать элемент к сетке или определённым координатам.
  • InertiaPlugin: позволяет имитировать инерционное движение, где элемент продолжает двигаться после отпускания мыши.
  • Связь с другими элементами: onDrag может управлять анимациями соседних объектов, создавая сложные интерактивные интерфейсы.

Пример snap-позиции:

Draggable.create("#box", {
  type: "x,y",
  inertia: true,
  snap: {
    x: function(endValue) {
      return Math.round(endValue / 100) * 100;
    },
    y: function(endValue) {
      return Math.round(endValue / 100) * 100;
    }
  }
});

Использование событий drag вместе с snap и inertia позволяет создавать динамичные и отзывчивые интерфейсы с минимальными усилиями, обеспечивая естественные движения и точное позиционирование элементов.

Оглавление