用JavaScript原生手写div的鼠标拖拽功能

最新推荐文章于 2022-09-02 18:06:20 发布

weixin_30980795

最新推荐文章于 2022-09-02 18:06:20 发布

阅读量213

点赞数

分类专栏： JavaScript事件处理机制文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_30980795/article/details/119935360

版权

JavaScript事件处理机制专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、三个事件onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标松）
鼠标按下时

box.onmousedown = function(e) {
	console.log("e.clientX",box.offsetLeft);
	console.log("e.clientY",box.offsetTop);
	
	var e = e || window.event; //要用event这个对象来获取鼠标的位置
	x = e.clientX - box.offsetLeft;
	y = e.clientY - box.offsetTop;
	isDrop = true; //设为true表示可以移动
}

二、得到box盒子离左侧x和上侧的距离y
在这里插入图片描述

document.onmousemove = function(e) {
	//是否为可移动状态                　　　　　　　　　　　 　　　　　　　
	if(isDrop) {　　　　
	    var e = e || window.event;                    　　
	    var moveX = e.clientX - x; //得到距离左边移动距离                    　　
	    var moveY = e.clientY - y; //得到距离上边移动距离
	    //可移动最大距离
	    var maxX = document.documentElement.clientWidth - box.offsetWidth;
	    var maxY = document.documentElement.clientHeight - box.offsetHeight;
	    //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
	    //范围限定方法一
	    /*if(moveX < 0) {
	        moveX = 0
	    } else if(moveX > maxX) {
	        moveX = maxX;
	    }
	
	    if(moveY < 0) {
	        moveY = 0;
	    } else if(moveY > maxY) {
	        moveY = maxY;
	    }　*/
	    //范围限定方法二　
	    moveX=Math.min(maxX, Math.max(0,moveX));
	    
	    moveY=Math.min(maxY, Math.max(0,moveY));
	    box.style.left = moveX + "px";　　
	    box.style.top = moveY + "px";　　　　　　　　　　
	} else {
	    return;　　　　　　　　　　
	}

}

三、鼠标移动时
为了防止鼠标移动过快事件无法正确处理所以事件绑定到document上
四、鼠标松开时
为了放置鼠标移动过快时间无法正确处理所以事件绑定到document上

五、可以这样表示范围限定

//范围限定  最小取最大  最大取最小
if(moveX < 0) {
        moveX= Math.max(0,moveX)//0
  }else if(moveX>maxX){
        moveX=Math.min(moveX,maxX);//maxX
  }
                 
   if(moveY < 0) {
       moveY= Math.max(0,moveY) //0
   }else if(moveY>maxY){
        moveY=Math.min(moveY,maxY); //maxY
   }

document.onmouseup = function() {
    isDrop = false; //设置为false不可移动
}

 document.onmousemove

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                position: absolute;
                width: 200px;
                height: 200px;
                background: red;
            }
            
        </style>
    </head>

    <body>
        <div class="box">
          <p>sfsdfsdfsdfsdfsdfsf</p>
        </div>
        <script>
            var box = document.getElementsByClassName("box")[0]; //获取元素
            var x, y; //鼠标相对与div左边，上边的偏移
            var isDrop = false; //移动状态的判断鼠标按下才能移动
            box.onmousedown = function(e) {
              console.log("e.clientX",box.offsetLeft);
              console.log("e.clientY",box.offsetTop);

                var e = e || window.event; //要用event这个对象来获取鼠标的位置
                x = e.clientX - box.offsetLeft;
                y = e.clientY - box.offsetTop;
                isDrop = true; //设为true表示可以移动
            }

            document.onmousemove = function(e) {
                //是否为可移动状态                　　　　　　　　　　　 　　　　　　　
                if(isDrop) {　　　　
                    var e = e || window.event;                    　　
                    var moveX = e.clientX - x; //得到距离左边移动距离                    　　
                    var moveY = e.clientY - y; //得到距离上边移动距离
                    //可移动最大距离
                    var maxX = document.documentElement.clientWidth - box.offsetWidth;
                    var maxY = document.documentElement.clientHeight - box.offsetHeight;
                    //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
                    //范围限定方法一，选其中一种
                    /*if(moveX < 0) {
                        moveX = 0
                    } else if(moveX > maxX) {
                        moveX = maxX;
                    }

                    if(moveY < 0) {
                        moveY = 0;
                    } else if(moveY > maxY) {
                        moveY = maxY;
                    }　*/
                    //范围限定方法二　
                    moveX=Math.min(maxX, Math.max(0,moveX));
                    
                    moveY=Math.min(maxY, Math.max(0,moveY));
                    box.style.left = moveX + "px";　　
                    box.style.top = moveY + "px";　　　　　　　　　　
                } else {
                    return;　　　　　　　　　　
                }

            }

            document.onmouseup = function() {
                isDrop = false; //设置为false不可移动
            }
        </script>
    </body>

</html>

weixin_30980795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript原生手写div的鼠标拖拽功能

一、三个事件onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标松）鼠标按下时box.onmousedown = function(e) { console.log("e.clientX",box.offsetLeft); console.log("e.clientY",box.offsetTop); var e = e || window.event; //要用event这个对象来获取鼠标的位置 x = e.clientX - box.offs.
复制链接

扫一扫

专栏目录