JS实现div拖拽 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style type="text/css">
        #div{
            position: absolute;
            width: 150px;
            height: 150px;
            background: cadetblue;
        }
    </style>
</head>
<body>
<div id="div"></div>

<script>
//div按下事件
    var Div = document.getElementById("div");
    Div.onmousedown = function (e) {
        // console.log("down");
        disX=e.clientX - Div.offsetLeft;//获取鼠标到div left的距离
        disY=e.clientY - Div.offsetTop;//获取鼠标到div top的距离
        //console.log(disX+' '+disY);
      document.onmousemove = function (e) {//处理鼠标滑动过快，脱离div，所以在document上添加事件
            //console.log("move");
          Div.style.left = e.clientX-disX+'px';//div的left等于鼠标的位置-鼠标到div左边的距离
          Div.style.top = e.clientY-disY+'px';
          //console.log(e.clientX-disX);
          //console.log(e.clientX-disY);
      };
        document.onmouseup = function () {//处理拖拽时鼠标滑到网址块区域，鼠标回来时div依旧跟随鼠标，事件也加在document上，超出document就停止
           // console.log("up");
            //document.onmousedown = null;//去除点击事件
            document.onmousemove = null;//去除移动事件，否则会“沾”在鼠标上
        };
        return false//在火狐老版本上会有浏览器bug会造成第二次以后拖拽产生重影，去除默认事件，可以去除浏览器影响。
    };



</script>
</body>
</html>
来源：CSDN
作者：Hello Hongbin
链接：https://blog.csdn.net/printf_hello/article/details/103928966
标签
div
log