纯js做鼠标拖拽物体并记录鼠标位置的效果（附pageX clientX offsetX screenX的区别图）

最新推荐文章于 2022-09-09 15:17:39 发布

Hzsilvana

最新推荐文章于 2022-09-09 15:17:39 发布

阅读量561

点赞数

文章标签： JavaScript DOM操作鼠标事件拖放元素定位

原文链接：https://www.cnblogs.com/ztt0918/p/8241797.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        .div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
        }


    </style>

    <script>
        //记录鼠标是否按下
        var isMouseDown=false;
        //获取鼠标刚按下时的位置
        var offestX=0;
        var offestY=0;

        //文档就绪函数
        onload=function(e){
            //获取div
            var div=document.getElementsByClassName("div")[0];
            //鼠标按下事件,鼠标按下是相对div而言的
            div.onmousedown=function(e){
                isMouseDown=true;
                //记录鼠标刚按下时的位置，相对物体div而言
                offestX= e.offsetX;
                offestY= e.offsetY;

            }


            //鼠标移动，鼠标移动是相对于整个页面而言的，所以用document
            document.onmousemove=function(e){
                //如何鼠标没有按下就直接返回，不用执行下面的代码
                if(isMouseDown==false)return;
                var x=  e.pageX-offestX;
                var y=  e.pageY-offestY;
                div.style.left=x+"px";//需要注意的是。position中的top和left的相对物体的左上角而言的。所以我们在鼠标移动时要重新计算左上角的位置
                div.style.top=y+"px";
             }
            //鼠标抬起
            document.onmouseup=function(e){
                isMouseDown=false;

            }

        }


    </script>
</head>
<body>
<div class="div" style="top: 0px;left: 0px">

</div>
</body>
</html>

示图讲解：