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

В библиотеке Interact.js каждое взаимодействие, будь то перетаскивание (drag), изменение размера (resize) или жест (gesture), генерирует объект события, содержащий исчерпывающую информацию о текущем состоянии действия. Этот объект позволяет контролировать поведение элемента, получать координаты, отслеживать скорость и направление движения, а также управлять стилями и ограничениями.

Свойство type

Свойство type указывает тип события. Значения могут включать:

  • dragstart — начало перетаскивания
  • dragmove — перемещение элемента
  • dragend — завершение перетаскивания
  • resizestart — начало изменения размера
  • resizemove — изменение размера в процессе
  • resizeend — завершение изменения размера
  • gesturestart, gesturemove, gestureend — события жестов (масштабирование, поворот)

Свойство target

target содержит DOM-элемент, к которому привязано взаимодействие. Через него можно напрямую изменять стили, добавлять классы или работать с данными элемента:

interact('.draggable').on('dragmove', function (event) {
    event.target.style.transform =
        `translate(${event.dx}px, ${event.dy}px)`;
});

Свойства dx и dy

Эти свойства отражают смещение элемента относительно предыдущего события. Они крайне полезны для плавного перемещения или анимации:

  • dx — смещение по оси X
  • dy — смещение по оси Y

Для накопленного перемещения используют event.pageX и event.pageY:

let x = 0, y = 0;

interact('.draggable').on('dragmove', function (event) {
    x += event.dx;
    y += event.dy;
    event.target.style.transform = `translate(${x}px, ${y}px)`;
});

Свойство rect

rect содержит объект с текущими координатами и размерами целевого элемента:

  • top, left, right, bottom — позиции элемента относительно страницы
  • width, height — размеры элемента

Используется для вычисления ограничений движения или коллизий с другими элементами.

Свойство interaction

interaction хранит информацию о текущем взаимодействии, включая все связанные события и состояние перетаскивания или изменения размера. В нём можно получить доступ к interactable и pointerId, что позволяет отслеживать несколько одновременных касаний.

Свойство pointer и pointers

  • pointer — объект с координатами текущего касания или мыши (clientX, clientY, pageX, pageY)
  • pointers — массив всех активных указателей для мультикасания, содержащий те же координаты

Это особенно важно при обработке жестов и мультидотного взаимодействия.

Свойства delta и velocity

  • delta — смещение от предыдущего события, аналогично dx/dy, но для жестов и масштабирования
  • velocity — объект, содержащий скорость движения (x и y в пикселях в секунду)

Используется для плавной анимации, предсказания позиции или инерционных эффектов.

Свойство coords

coords включает все доступные координаты события:

  • page — координаты относительно документа
  • client — координаты относительно окна просмотра
  • screen — координаты относительно экрана

Пример применения при ограничении движения:

interact('.draggable').draggable({
    listeners: {
        move(event) {
            let x = event.pageX;
            let y = event.pageY;

            if (x < 0) x = 0;
            if (y < 0) y = 0;

            event.target.style.transform = `translate(${x}px, ${y}px)`;
        }
    }
});

Свойство edges (для изменения размера)

При работе с изменением размера edges содержит информацию о том, какие грани элемента были затронуты:

  • top, left, bottom, right — true, если соответствующая грань активна
  • Используется для динамического изменения стиля и ограничения размеров.

Свойство rectDelta

При масштабировании или изменении размера rectDelta показывает разницу между начальным и текущим размером элемента, включая смещение:

  • top, left, width, height
  • Удобно для анимации или вычисления новых координат элемента на странице.

Свойство interaction.eventable

Содержит ссылки на объект Interactable, через который инициировано событие. Позволяет получить параметры ограничений, инерции и допустимой области движения.

Свойство buttons

Отражает, какая кнопка мыши была задействована:

  • 1 — левая
  • 2 — правая
  • 4 — средняя
  • Комбинируются для нескольких нажатий

Это важно при различении действий при клике правой кнопкой или комбинации с клавишами.

Свойство originalEvent

Хранит исходное DOM-событие (MouseEvent, TouchEvent, PointerEvent). Позволяет использовать стандартные свойства, такие как ctrlKey, shiftKey, altKey, для расширенного контроля поведения.

Свойство immediatePropagationStopped

Булево значение, указывающее, был ли вызван метод stopImmediatePropagation() для текущего события. Помогает управлять конфликтами между несколькими обработчиками.

Каждое из перечисленных свойств объекта события Interac.js предоставляет полный контроль над интерактивными действиями. Их комбинирование позволяет реализовать сложные интерфейсы с точной настройкой перемещений, масштабирования, жестов и анимации элементов на странице.

Оглавление