javascript - 如何在纯(普通)JavaScript 中修复我的可拖动代码，移动 div 的问题(div 跳跃或不移动)

Question

我尝试编写纯可拖动元素，移动元素，我想单击div移动并将div放在容器上的某个位置。

https://codepen.io/kotbezbutow/pen/VJMbeK

我现在不知道如何解决我的问题。如果我计算光标和 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 翻译而不是元素左/顶部