JS div跟随鼠标移动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/boonyaxnn/article/details/89180997

一、在body里面新建一个div

<div class="box">

二、在css里面写上样式

  PS：一定要写上定位position，因为offsetLeft、offsetTop计算的是当前元素的外边距到已经定位的父元素内边距的水平或者垂   直的距离。

<style>
    .box {
        height: 200px;
        width: 200px;
        border: 2px solid skyblue;
        position: absolute;
        left: 100px;
        top: 100px;
    }
</style>

三、js代码如下

<script>
    //1.获取页面元素
    var box = document.querySelector('.box');
    //设置开关判断鼠标是在box否按下
    var flag = false;
    //2.box绑定鼠标按下事件
    var delX = 0;
    var delY = 0;
    box.onmousedown = function () {
        flag = true;
        //获取需要删除的距离
         delX = event.clientX - box.offsetLeft;
         delY = event.clientY - box.offsetTop;
    };
    //3.整个文档绑定鼠标移动事件
    document.onmousemove = function () {
        if (flag) {
            //删除多余的距离 保持住按下的位置
            var x = event.clientX - delX;
            var y = event.clientY - delY;
            box.style.left = x + 'px';
            box.style.top = y + 'px';
        }
    };
    //4.给整个文档绑定了 鼠标抬起事件
    document.onmouseup = function () {
        flag = false;
    };
</script>