原生js拖拽事件

最新推荐文章于 2023-07-25 14:16:40 发布

document_write

最新推荐文章于 2023-07-25 14:16:40 发布

阅读量640

点赞数

本文链接：https://blog.csdn.net/document_write/article/details/89681356

版权

本文介绍了如何利用原生JavaScript实现拖拽事件，主要涉及onmousedown、onmousemove和onmouseup三个关键事件，通过监听鼠标坐标变化来动态调整元素的位置。

摘要由CSDN通过智能技术生成

实现思路：
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。这时需要三个事件。
1.onmousedown 鼠标按下事件；

2,onmousemove 鼠标移动事件；

3.onmouseup 鼠标抬起事件；

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽事件</title>
	<style>
       
*{
  	margin: 0;
  	padding: 0;
  	list-style: none;
  }

#box{
   width: 100px;
   height: 100px;
   background: black;
   position: absolute;
}

	</style>
</head>
<body>
   <div id="box"></div>
</body>
<script>

    box.onmousedown=function(e){
        var  e = e || event; //获取event对象
        var  X= e.clientX-box.offsetLeft;  // 计算鼠标按下的时候到盒子的边界左边界距离；
        var  Y =e.clientY-box.offsetTop;// 计算鼠标按下的时候到盒子的边界上边界距离；
        document.onmousemove=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时，说明盒子超出了左边界，这时我们让这个距离等于0，
                                      使盒子不超出左边界，以下同理；
                }
                if(moveY<0){
                    moveY=0;
                }
                if(moveX>maxW){
                    moveX= maxW
                }
                if(moveY>maxH){
                    moveY=maxH
                }
                box.style.left = moveX+"px";  //设置被移动后左边界的距离
                box.style.top = moveY+"px";   //设置被移动后上边界的距离

        }
    }
    document.onmouseup=function(){
        document.onmousemove = null;    //清空被移动的函数
    }


</script>
</html>

document_write

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js拖拽事件

实现思路：拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。这时需要三个事件。1.onmousedown 鼠标按下事件；2,onmousemove 鼠标移动事件；3.onmouseup 鼠标抬起事件；具体代码<!DOCTYPE html><html lang=...
复制链接

扫一扫