Client, page и screen координаты

В Interact.js взаимодействие с элементами на странице основывается на событиях drag, resize, gesture и других, которые предоставляют детальную информацию о позиции курсора или тач-события. Для корректной обработки этих событий важно понимать различие между координатами client, page и screen.

Client coordinates (clientX, clientY)

Client координаты отражают позицию курсора относительно видимой области окна браузера (viewport), без учета прокрутки страницы.

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

  • Начало координат находится в верхнем левом углу видимой области.
  • Значение не изменяется при прокрутке страницы.
  • Используются для вычисления относительных позиций элементов внутри контейнеров или для управления элементами в пределах видимой области.

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

interact('.draggable').draggable({
  listeners: {
    move(event) {
      console.log('Client X:', event.client.x, 'Client Y:', event.client.y);
    }
  }
});

В этом примере event.client.x и event.client.y дают координаты курсора внутри текущего окна, что удобно для позиционирования элемента относительно его контейнера.

Page coordinates (pageX, pageY)

Page координаты учитывают прокрутку страницы и отражают позицию курсора относительно всей страницы, а не только видимой области.

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

  • Начало координат находится в верхнем левом углу документа.
  • Значение изменяется при скролле страницы.
  • Полезны для вычислений позиции элемента относительно всей страницы, например, для drag-and-drop между различными секциями.

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

interact('.draggable').draggable({
  listeners: {
    move(event) {
      console.log('Page X:', event.page.x, 'Page Y:', event.page.y);
    }
  }
});

event.page.x и event.page.y позволяют точно определить позицию даже если страница прокручена, что критично для элементов с абсолютным позиционированием.

Screen coordinates (screenX, screenY)

Screen координаты отражают положение курсора относительно монитора пользователя, а не окна браузера или документа.

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

  • Начало координат — верхний левый угол экрана монитора.
  • Обычно используются для интеграции с нативными приложениями или внешними окнами.
  • Не учитывают размеры окна браузера или прокрутку страницы.

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

interact('.draggable').draggable({
  listeners: {
    move(event) {
      console.log('Screen X:', event.screen.x, 'Screen Y:', event.screen.y);
    }
  }
});

event.screen.x и event.screen.y показывают абсолютное положение курсора на экране, что редко требуется для веб-интерфейсов, но важно при построении межоконных взаимодействий.

Отличия и выбор координат

Координаты Относительно Учитывает прокрутку Применение
client Окна браузера (viewport) Нет Позиционирование элементов внутри окна
page Всего документа Да Drag-and-drop, абсолютное позиционирование
screen Экрана пользователя Нет Межоконные взаимодействия, нативные приложения

Ключевой момент: для большинства задач с элементами на странице (draggable, resizable) используются client и page координаты, а screen координаты применяются редко и только для специфичных сценариев.

Работа с координатами в Interact.js

Interact.js предоставляет координаты через объект event:

event.client.x // client X
event.client.y // client Y
event.page.x   // page X
event.page.y   // page Y
event.screen.x // screen X
event.screen.y // screen Y

Дополнительно есть возможность использовать delta координаты:

  • event.dx — изменение по X с предыдущего события
  • event.dy — изменение по Y с предыдущего события

Это позволяет легко реализовать плавное движение элементов, независимо от типа координат:

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);
    }
  }
});

Использование dx/dy позволяет не заботиться о типе координат, фокусируясь на относительном изменении позиции.

Взаимодействие с touch-событиями

Для тач-устройств координаты работают аналогично, но Interact.js нормализует события, чтобы client, page и screen всегда были доступны:

interact('.draggable').draggable({
  listeners: {
    move(event) {
      console.log('Touch Client:', event.client.x, event.client.y);
      console.log('Touch Page:', event.page.x, event.page.y);
    }
  }
});

Это упрощает разработку универсальных интерфейсов без необходимости писать отдельный код для мыши и тача.

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

  • Использовать client координаты при позиционировании относительно видимой области.
  • Использовать page координаты при абсолютном позиционировании на странице или drag-and-drop между секциями.
  • Screen координаты применять только при взаимодействии с окнами за пределами браузера.
  • Всегда применять dx/dy для плавного движения элементов, избегая прямой привязки к абсолютным координатам.

Понимание различий между client, page и screen координатами является ключевым при работе с Interact.js, особенно при создании сложных интерактивных интерфейсов и адаптивных drag-and-drop сценариев.

Оглавление