Как перетаскивать элемент мышкой, но чтобы следовал за мышкой именно той областью на которой был клик?

Question

Всем привет. Сделал перетаскивание элемента мышкой, но как только кликаю элемент перемещается и цепляется к курсору левым верхним углом. А мне нужно, чтобы где кликнул той областью и перетаскивался. Как такое реализовать?

var listener = function (e) {

        full_info_div.style.left = e.clientX + "px";
        full_info_div.style.top = e.clientY + "px";
    };

    full_info_div.addEventListener('mousedown', e => {
        document.addEventListener('mousemove', listener);
        document.querySelector("html").setAttribute("style", "user-select: none");

    });

    full_info_div.addEventListener('mouseup', e => {
        document.removeEventListener('mousemove', listener);
        document.querySelector("html").removeAttribute("style");

    });

Answer 1

Один из вариантов решения: сохранять разницу между координатами клика и текущим положением элемента, и при движении - корректировать положение с помощью этой разницы

Например:

const shift = {
  x: 0,
  y: 0
};
var listener = function(e) {
  /* Устанавливаем положение элемента с учетом координат клика */
  full_info_div.style.left = e.clientX + shift.x + "px";
  full_info_div.style.top = e.clientY + shift.y + "px";
};

full_info_div.addEventListener('mousedown', e => {
  document.addEventListener('mousemove', listener);
  /* Сохраняем разницу между координатами клика и положения элемента */
  shift.x = parseInt(full_info_div.style.left) - e.clientX;
  shift.y = parseInt(full_info_div.style.top) - e.clientY;
  document.querySelector("html").setAttribute("style", "user-select: none");

});

full_info_div.addEventListener('mouseup', e => {
  document.removeEventListener('mousemove', listener);
  document.querySelector("html").removeAttribute("style");

});

#full_info_div {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
}

<div id="full_info_div" style="left:0; top:0;"></div>

БЛОГ НА HUSL

Как перетаскивать элемент мышкой, но чтобы следовал за мышкой именно той областью на которой был клик?

Ответы (1 шт):