鼠标拖动事件

最新推荐文章于 2024-04-16 19:44:59 发布

qq_43942799

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量1.5k

点赞数

分类专栏：事件文章标签：鼠标拖动事件

本文链接：https://blog.csdn.net/qq_43942799/article/details/89316779

版权

事件专栏收录该内容

0 篇文章 0 订阅

订阅专栏

	首先明白一件事情，鼠标拖动事件中，鼠标点击图片，鼠标移动，鼠标松开，三件事，所以用到三个属性，分别是onmousedown,onmousemove,onmouseup,三个鼠标事件。
	在鼠标点击图片时，鼠标在图片的位置已经固定了，即使是在移动过程中，鼠标也是在图片点击时的位置，所以我们首先要在鼠标点击的时候获取鼠标的位置，然后鼠标点击,图片到浏览器的距离，鼠标到浏览器的距离减去图片到浏览器的距离就获得了鼠标到图片的距离(固定)，然后获取触发鼠标的移动事件，鼠标移动的时候，图片会跟随鼠标的位置移动。所以我们在body里面写内容的时候要给图片设置一个定位，鼠标移动的时候获取鼠标到浏览器的距离减去鼠标到图片的距离（即上面算出来的距离）,即图片到浏览器的距离，就算出了图片到浏览器的距离。也就是图片随鼠标移动之后，图片的位置。
	要注意的是图片移动只能在你的浏览器内，不能跑到浏览器的外面。所以移动以后你的图片到浏览器的距离不能<0（包括你的左距离和上距离）;而且只能在你的可视区域里所以你图片的移动范围也必须是小于或者等于你的浏览器的可视宽度减去图片的可视宽高。
	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>拖拽</title>
    <style type="text/css">
        #box{width:100px;
            height:100px;
            background:red;
            cursor: move;
            position:relative;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script type="text/javascript">
        box.function(e){
        var e=e||event;
        X=e.clientX-box.offsetLeft;//获取图片到鼠标之间的左距离。
        Y=e.clientY-box.offsetTop;//获取图片到鼠标之间的上距离。
        document.function(e){
             var e=e||event;
             var moveX=e.clientX-X;//移动以后图片到浏览器的水平 距离。
             var moveY=e.clientY-Y;//移动以后图片到浏览器的垂直距离。
             var winx=document.documentElement.clientWidth;//获取固定语法浏览器的可视宽
             var winy=document.documentElement.clientHeight;//获取固定语法浏览器的可视高
             var maxw=winx-box.offsetWidth;//获取在浏览器水平移动的最大距离。
             var maxh=winy-box.offsetHeight;//获取在浏览器垂直移动的最大距离。
            if(moveX<0){
                moveX=0;
            }//移动后到浏览器的水平距离=0;
            if(moveY<0){
                moveY=0;
            }//移动后到浏览器的垂直距离=0;
            if(moveX>maxw){
                moveX=maxw;
            } //不能超过图片到浏览器的最大水平距离。
            if(moveY>maxh){
                moveY=maxh;
            }//不能超过图片到浏览器的最大垂直距离。
            box.style.left=moveX+"px";
            box.style.top=moveY+"px";
        }//鼠标每移动一次图片的位置
    }
        document.function(){
            document.null;
        
    }//鼠标松开以后点击事件清零。
</script>```

qq_43942799

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖动事件

首先明白一件事情，鼠标拖动事件中，鼠标点击图片，鼠标移动，鼠标松开，三件事，所以用到三个属性，分别是onmousedown,onmousemove,onmouseup,三个鼠标事件。在鼠标点击图片时，鼠标在图片的位置已经固定了，即使是在移动过程中，鼠标也是在图片点击时的位置，所以我们首先要在鼠标点击的时候获取鼠标的位置，然后鼠标点击,图片到浏览器的距离，鼠标到浏览器的距离减去图片到浏览器的距离就...
复制链接

扫一扫