JS代码实现拖拽（拖拽三剑客）-蒲公英云

JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。
在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个通用步骤，相信大家在学会这三个步骤之后都能够实现元素在页面上的拖拽功能。
下面直接上代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 100px}
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById("div1");
                var offsetX = 0;
                var offsetY = 0;
                //第一步：当对div进行鼠标点击事件的时候，记录下当前鼠标的位置
                oDiv.onmousedown = function(ev){
                    var e = ev || window.event;
                    offsetX = e.clientX - oDiv.offsetLeft;
                    offsetY = e.clientY - oDiv.offsetTop;
                    //第二步：当我们在document下对div进行拖动的时候，给div的left和right进行定位
                    document.onmousemove = function(ev){
                        var e = ev || window.event;
                        oDiv.style.left = e.clientX - offsetX + 'px';
                        oDiv.style.top = e.clientY - offsetY + 'px';
                    }
                }
                //第三步：在document下当鼠标抬起的时候，取消鼠标跟随事件
                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }
        </script>
    </head>
    <body>
        <div id = 'div1'></div>
    </body>
</html>