Как исправить мой перетаскиваемый код в чистом (ванильном) JavaScript, проблема с перемещением div (прыжок в div или отсутствие перемещения)

Question

Я пытаюсь написать чистый перетаскиваемый элемент, движущийся элемент, я хочу щелкнуть по элементу div move и поместить div где-нибудь в контейнер.проблема.Если я вычислю разницу между курсором и краем div, мой div не будет двигаться.

        moveDraggable() {
            document.onmousemove = (e) => {

                let elementX = this.element.offsetLeft;
                let elementY = this.element.offsetTop;

                let mouseDownX = e.clientX;
                let mouseDownY = e.clientY;



                if (this.draggable == undefined) {
                    return;
                }

                let roznica = (mouseDownX - elementX);

                this.draggable.style.left = mouseDownX + roznica + "px";
                this.draggable.style.top = mouseDownY - 40 +  "px";
            }
        }

Все мои работы на codepen https://codepen.io/kotbezbutow/pen/VJMbeK

Answer 1

При наведении курсора мыши необходимо сохранить дельту между позицией мыши и позицией div.Затем, при перемещении мыши, вы должны вычесть предыдущую дельту в положение мыши по событию

element.addEventListener('mousedown', event => {
    const rel = (() => {
        const x = event.clientX - parseInt(this.style.left)
        const y = event.clientY - parseInt(this.style.top)
        return { x: x, y: y }
    })()
    const moveHandler = event => {
        this.style.left = event.clientX - rel.x + 'px'
        this.style.top = event.clientY - rel.y + 'px'
    }
    const endHandler = () => {
        window.removeEventListener('mousemove', moveHandler, false)
        window.removeEventListener('mouseup', endHandler, false)
    }
    window.addEventListener('mousemove', moveHandler, false)
    window.addEventListener('mouseup', endHandler, false)
}

РЕДАКТИРОВАТЬ: для плавного перемещения вы должны использовать перевод css вместо элемента left / top

Answer 2

Я пытался и пытался, и удалось, спасибо за помощь.Наиболее важным является расчетная разница между curosr и положением div в mousedown, а не mousemove.

class Move {
    constructor(element) {

        this.border = undefined;
        this.draggable = undefined;

        document.querySelector("body").addEventListener("mousedown", (e) => {

            // get element and init draggable
            this.draggable = e.target.closest(element);

            let mouseDownX = e.clientX;
            let mouseDownY = e.clientY;

            let elementX = this.draggable.offsetLeft;
            let elementY = this.draggable.offsetTop;

            this.differanceX = mouseDownX - elementX;
            this.differanceY = mouseDownY - elementY;

            // move draggable
            document.addEventListener('mousemove', (e) => {

                // return if end
                if (this.draggable == undefined) {
                    return;
                }

                let mouseDownX = e.clientX;
                let mouseDownY = e.clientY;

                this.draggable.style.left = mouseDownX - this.differanceX + "px";
                this.draggable.style.top = mouseDownY - this.differanceY + "px";

            });

            document.addEventListener('mouseup', (e) => {
                this.draggable = undefined;
            });

        });
    }
}