Установка позиции элемента Dynami c с использованием Javascript вместо jQuery offset ()

Question

Я могу динамически позиционировать элемент div, так что когда пользователь перемещает мышь, элемент следует , используя jQuery:

inputFile.offset({
   top: ev.pageY - 15,
   left: ev.pageX - 160
});

Я бы предпочел не использовать jQuery. Как бы я совершил sh то же самое, используя ваниль JavaScript?

Answer 1

Определите div для использования, затем создайте функцию для координат X и Y и одну для курсора, а затем установите div для курсора.

var div = 'mydiv'; // div that will follow the mouse. Set position:absolute in CSS
var offset_X = 10; // X offset from mouse position
var offset_Y = 10; // Y offset from mouse position

function mouseX(evt) { // create function for x mouse event
  if (!evt) evt = window.event;
  if (evt.pageX) return evt.pageX;
  else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  else return 0;
}

function mouseY(evt) { // create function for Y mouse event
  if (!evt) evt = window.event;
  if (evt.pageY) return evt.pageY;
  else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  else return 0;
}

function follow(cursor) { //  create function for cursor
  var obj = document.getElementById(div).style;
  obj.left = (parseInt(mouseX(cursor)) + offset_X) + 'px';
  obj.top = (parseInt(mouseY(cursor)) + offset_Y) + 'px';
}
document.onmousemove = follow; // call function when user moves mouse

#mydiv {
  position: absolute;
  display: block;
  background: #ccc;
  height: 100px;
  padding: 20px 50px;
}

<div id="mydiv"> </div>