Как можно задать блоку позицию относительно положения курсора в области родителя?

Question

[Miron4ek_228]

макет - https://codepen.io/Menson/pen/yLPXYgy

Задача такова: нужно чтобы при нажатии мыши в области .wrapper для ellipse присваивалась позиция offsetLeft/offsetTop такая же, как и положение курсора относительно блока при зажатой кнопки мыши.

То есть если позиция мыши X: 50px/Y: 20px, то эти координаты присваиваются дл ellipse через offsetLeft/offsetTop.
Положение ellipse пользователь регулирует по своему усмотрению (но только в пределах .wrapper).
wrapper может находиться в любом месте страницы поэтому использовать pageX/pageY и им подобных - плохая идея

Вот пример: https://doka.guide/js/element-positioning-js/ . Но здесь используются доп.вложения body и page.

Comments

[twobomb]

document.addEventListener("mousemove", function(e) {  
  let x = e.clientX - wrapper.offsetLeft - ellipse.offsetWidth/2;
  if(x < 0)x = 0;
  if(x > 125)x = 125;
  ellipse.style.left =  x + "px";
  
  let y = e.clientY - wrapper.offsetTop- ellipse.offsetHeight/2;
  if(y < 0)y = 0;
  if(y > 125)y = 125;
  ellipse.style.top =  y + "px";
});

[Miron4ek_228]

twobomb, спасибо. Очень помог