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

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

[ksnk]

У элемента есть крайне удобный метод getBoundingClientRect, который почти все проблемы позиционирования решает в меру элегантно.

var disp=[0,0]; // смещение
        var listener = function (e) {

            full_info_div.style.left = (disp[0]+e.clientX) + "px";
            full_info_div.style.top = (disp[1]+e.clientY) + "px";
        };

        full_info_div.addEventListener('mousedown', e => {
          let b = full_info_div.getBoundingClientRect();
          disp= [b.left-e.clientX,b.top-e.clientY];
          document.addEventListener('mousemove', listener);
           document.querySelector("html").setAttribute("style", "user-select: none");

        });
...

Answer 2

[VoidVolker]

Вычислить разницу между координатами клика и позицией элемента, а во время движения мышки отнять её от текущей позиции курсора.

Comments

[Роман]

А как это сделать? Я только учу, еще многих вещей не знаю

[VoidVolker]

Роман, ну, судя по коду - координаты клика вы уже нашли, координаты элемента тоже, переменные тоже знаете. Осталось найти событие клика мышки и совместить всё это вместе.

[ksnk]

Роман, У элемента есть крайне удобный метод getBoundingClientRect, который почти все проблемы позиционирования решает в меру элегантно.

var disp=[0,0]; // смещение
        var listener = function (e) {

            full_info_div.style.left = (disp[0]+e.clientX) + "px";
            full_info_div.style.top = (disp[1]+e.clientY) + "px";
        };

        full_info_div.addEventListener('mousedown', e => {
          let b = full_info_div.getBoundingClientRect();
          disp= [b.left-e.clientX,b.top-e.clientY];
          document.addEventListener('mousemove', listener);
           document.querySelector("html").setAttribute("style", "user-select: none");

        });
...

[Роман]

ksnk, Спасибо большое. Можешь оформить как ответ.