JavaScript实现鼠标拖拽效果

JavaScript实现鼠标拖拽效果

前几篇博客一直在讲鼠标的移动事件相关的效果，今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图：

HTML代码：

    <div id="box"></div>

CSS代码：

    * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }

JS代码：

    // 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)的差来计算被拖拽元素的坐标值。

视频讲解链接：
https://www.bilibili.com/video/BV1AK411p7pz/