JavaScript demo练习之拖拽div

一、功能概述

使标签为div的方块随鼠标拖动而移动，松开停下。

二、实现步骤

1. 为div绑定onmousedown和onmousemove事件。
2. 获取div原始位置。
3. 获取鼠标坐标。
4. 更新div位置。
5. 为div绑定onmouseup事件。

三、代码实现

var div = document.querySelector("div");
div.onmousedown = function (e1) {
    if (e1.which == 1) {
        let dx = e1.clientX - div.offsetLeft;
        let dy = e1.clientY - div.offsetTop;
        document.onmousemove = function (e2) {
            div.style.left = e2.clientX - dx + "px";
            div.style.top = e2.clientY - dy + "px";
        }
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup=null;
        }
    }
}

四、问题总结

1. 为document而不是div绑定onmousemove和onmouseup事件。

若给div绑定onmousemove事件，当鼠标快速移动导致划出div区域时，div不再随鼠标移动，因为此时的onmouseup发生在div之外。
同理若给div绑定onmouseup事件，若div还有兄弟节点，且其兄弟节点的z-index更大，那么当鼠标拖拽到兄弟节点区域再松开时，div仍然跟随鼠标移动。这也是因为onmouseup事件不是发生在div区域内，且因为是兄弟节点，无法冒泡。
既然给document绑定了onmouseup，那么就要在使用之后及时销毁它，否则在页面的其他地方点击鼠标时还是会触发函数，即这里的onmouseup是一次性的。