js 鼠标拖动div

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

神奇大叔

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

阅读量468

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103273849

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

div中心跟踪鼠标动而动
得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离

div任意位置随鼠标动而动
得到鼠标第一次坐标，移动时div的左上距离就为div每次移动前最开始的左上距离加上鼠标移动中的坐标减去鼠标第一次坐标，即任意位置移动是移动过程相对于第一次的位移

小div在大div内移动
在任意移动的基础上，判断div的最终左上边距，如果大于或小于大div的大小，则将小div的左右边界设置为临界值

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.div1{
				height:100px;
				width:100px;
				background-color: orange;
				position:absolute;
				top:100px;
				left: 100px;
			}	
					
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
		
		<script>
			var div1=document.querySelector(".div1");
			var flag=false;
			var mx=0;
			var my=0;
			var dx=0;
			var dy=0;
			div1.onmousedown=function(){
				flag=true;
				console.log("a");
				mx=event.clientX;
				my=event.clientY;
				dx=div1.offsetLeft;
				dy=div1.offsetTop;

			}
			
				
				document.onmousemove=function(){  //在整个html范围内滑动
					
					if(flag){
						var templeft=event.clientX;
						var temptop=event.clientY;
						
						div1.style.left=templeft-mx+dx+"px";
						div1.style.top=temptop-my+dy+"px";   //样式任意位置随鼠标拖动而拖动
						
						
						/*div1.style.left=templeft-50+"px";
						div1.style.top=temptop-50+"px";*/  //样式中心随鼠标拖动而拖动
					}
				}
			document.onmouseup=function()
			{
				flag=false;
			}
			
			
		</script>
	</body>
</html>

小div在大div内移动

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.big{
				width:500px;
				height:500px;
				border:solid 1px orange;
				position: relative;
				left:50px;
				top:50px;
			}
			.small{
				width:100px;
				height:100px;
				background-color:orange;
				position:absolute;
				left:50px;
				top:100px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="small">
				
			</div>
		</div>
		
		<script>
			var big=document.querySelector(".big");
			var small=document.querySelector(".small");
			var flag=false;
			var cx;
			var cy;
			var sx;
			var sy;
			
			
			small.onmousedown=function(){
				flag=true;
				cx=event.clientX;
				cy=event.clientY;
				sx=small.offsetLeft;
				sy=small.offsetTop;
				console.log(cx,sx);
			}
			
			big.onmousemove=function(){
				if(flag){
					var ccx=event.clientX;
					var ccy=event.clientY;
					
					var resultx=sx+ccx-cx;
					var resulty=sy+ccy-cy;
					
					
					//确定边界
					if(resultx<0)
					{
						resultx=0;
					}
					if(resultx>400)
					{
						resultx=400;
					}
					if(resulty<0)
					{
						resulty=0;
					}
					if(resulty>400)
					{
						resulty=400;
					}
					//结果
					small.style.left=resultx+"px";
					small.style.top=resulty+"px";
					
					
				}
			}

			document.onmouseup=function(){
				flag=false;
				
			}
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

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

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div的左上距离就为div每次移动前最开始的左上距离加上鼠标移动中的坐标减去鼠标第一次坐标，即任意位置移动是移动过程相对于第一次的位移<html> <head> <meta charset="utf-8...
复制链接

扫一扫