JavaScript实现鼠标拖拽效果

关于如何利用鼠标事件实现拖拽div块移动的效果

<div id="box"></div>
 * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    // 1.获取元素
    var oBox = document.getElementById("box");

    // 2.鼠标按下事件
    oBox.onmousedown = function (ev) {
        var ev = ev || window.event;


        // 获取鼠标相对于盒子的坐标
        var x2 = ev.offsetX;
        var y2 = ev.offsetY;



        // 鼠标移动
        document.onmousemove = function (ev) {
            var ev = ev || window.event;
            var x3 = ev.pageX;
            var y3 = ev.pageY;
            oBox.style.top = y3 - y2 + "px";
            oBox.style.left = x3 - x2 + "px"
        }
    }

    // 4.鼠标松开事件
    document.onmouseup = function () {
        document.onmousemove = function () {

        }
    }
    

利用鼠标指针的坐标(event.pageX,event.pageY)与鼠标相对于拖拽元素的坐标(event.offsetX,event.offsetY)的差来计算被拖拽元素的坐标值。