Question

我尝试编写纯可拖动元素，移动元素，我想单击div move并将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转换而不是元素left / top

Answer 2

我尝试并尝试成功了，寻求帮助。最重要的是计算鼠标向下而不是鼠标移动时光标和div位置之间的差异。

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;
            });

        });
    }
}

如何使用纯净的（原始）JavaScript修复可拖动代码，移动div（div跳动或不移动）存在问题

2 个答案: