鼠标拖拽

最新推荐文章于 2020-12-12 12:15:48 发布

chain_fei

最新推荐文章于 2020-12-12 12:15:48 发布

阅读量675

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/chain_fei/article/details/99624063

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在开发中做提示信息要一直悬浮在表层，但是总是会覆盖底层文字，所以试写一个鼠标拖拽功能。

写一个html 页面，这里用到鼠标按下（onmousedown），鼠标移动(onmousemove)，鼠标抬起(onmouseup)三个指令进行操作


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color: red;
				position: absolute;
				left:0;top:0;
			}
		</style>
	</head>

	<body>
        <div></div>
		<script>
//			 onmousedown   onmousemove onmouseup
              var oDiv=document.getElementsByTagName("div")[0];
              
              
              var cw=document.documentElement.clientWidth;
              var ch=document.documentElement.clientHeight;
              
              var dw=oDiv.clientWidth;
              var dh=oDiv.clientHeight;
              
              oDiv.onmousedown=function(e){
              	 var ev=e||window.event;
              	 var divX=ev.clientX-oDiv.offsetLeft;
              	 var divY=ev.clientY-oDiv.offsetTop;
              	
              	   document.onmousemove=function(e){
              	   	console.log(oDiv.offsetLeft)
              	   	   var ev=e||window.event;
              	   	   var x=ev.clientX-divX;
              	   	   var y=ev.clientY-divY;
              	   	  
              	   	   if(x<=0){
              	   	   	x=0;
              	   	   }
              	   	   if(y<=0){
              	   	   	  y=0;
              	   	   }
              	   	   if(x>=cw-dw){
              	   	   	  x=cw-dw
              	   	   }
              	   	   if(y>=ch-dh){
              	   	   	 y=ch-dh
              	   	   }
              	  
              	   	   
              	   	   oDiv.style.left=x+"px";
              	   	   oDiv.style.top=y+"px";
              	   }
              	   
              	   document.onmouseup=function(){
              	   	  document.onmousemove=null;
              	   	  document.onmouseup=null;
              	   }
              }
		</script>
	</body>

</html>