鼠标拖拽

最新推荐文章于 2022-11-08 11:45:56 发布

汁喵

最新推荐文章于 2022-11-08 11:45:56 发布

阅读量104

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_41937358/article/details/79818376

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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.οnmοusedοwn=function(e){
              	 var ev=e||window.event;
              	 var divX=ev.clientX-oDiv.offsetLeft;
              	 var divY=ev.clientY-oDiv.offsetTop;
              	
              	   document.οnmοusemοve=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.οnmοuseup=function(){
              	   	  document.οnmοusemοve=null;
              	   	  document.οnmοuseup=null;
              	   }
              }
		</script>
	</body>

</html>

汁喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标拖拽

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; div{ width:100px; height:1
复制链接

扫一扫