Ищу похожее на pageX свойство

Рейтинг: 0Ответов: 1Опубликовано: 21.02.2023

Делаю Drag and Drop на сайте. У меня расчитывается положение и перемещение элемента с помощью этих строчек:

// запомним, что элемент нажат на текущих координатах pageX/pageY
      dragObject.downX = e.pageX;
      dragObject.downY = e.pageY;
// создать вспомогательные свойства shiftX/shiftY
      var coords = getCoords(dragObject.avatar);
      dragObject.shiftX = dragObject.downX - coords.left;
      dragObject.shiftY = dragObject.downY - coords.top;

// отобразить перенос объекта при каждом движении мыши
      dragObject.avatar.style.left = e.pageX - dragObject.shiftX + 'px';
      dragObject.avatar.style.top = e.pageY - dragObject.shiftY + 'px';

function getCoords(elem){
      top: box.top + pageYOffset,
      left: box.left + pageXOffset
}

Но так как relative для этого элемента менее широкий и ниже, чем вся страница, то отображение происходит некорректно. И если высота фиксированая и можно просто вычесть разницу, то ширина не фиксирована.

Вопрос: Есть ли какое-то свойство идентичное pageX/Y, которое будет считать координаты относительно relative? Или есть другой способ реализовать это корректно?

javascript html веб-программирование drag-n-drop
Источник: Stack Overflow на русском

Ответы

▲ 0

используйте свойство clientX и clientY вместо pageX и pageY. Эти свойства возвращают координаты мыши относительно верхнего левого угла видимой области браузера, то есть вашей видимой области содержащей элемент.

dragObject.downX = e.clientX;
dragObject.downY = e.clientY;

var coords = getCoords(dragObject.avatar);
dragObject.shiftX = dragObject.downX - coords.left;
dragObject.shiftY = dragObject.downY - coords.top;

dragObject.avatar.style.left = e.clientX - dragObject.shiftX + 'px';
dragObject.avatar.style.top = e.clientY - dragObject.shiftY + 'px';