鼠标拖拽事件

最新推荐文章于 2024-07-26 20:46:33 发布

喃l风

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量3.9k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43581085/article/details/123984688

版权

练手demo1——鼠标拖拽事件

功能：

在html中放置一个box1
让鼠标能够拖拽着box1在视图中移动

思路分析：

拖拽的流程

当鼠标在被拖拽元素上按下时，对box1对象开始拖拽 onmousedown
当鼠标移动时，被拖拽元素在视图范围里面跟随鼠标移动 onmousemove
当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<!-- <script type="text/javascript">
			
			window.onload = function(){
				//获取box1，对box1对象开始拖拽
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;			
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
					};
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};
			};
		</script> -->
	
	
		<script>
			// 	拖拽box1元素
			//  拖拽的流程
			//  1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
			//  2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
			//  3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup

			window.onload = function()
			{
				var box1 = document.getElementById("box1");

				box1.onmousedown = function(event)
				{
					//设置box1捕获所有鼠标按下的事件
					box1.setCapture && box1.setCapture();
					event = event || window.event;
					//记录鼠标相对于盒子的位移距离
					var offsetx = event.clientX -box1.offsetLeft;
					var offsety = event.clientY -box1.offsetTop;
					document.onmousemove = function(event)
					{
						event = event || window.event;
						//移动后的鼠标坐标
						var x = event.clientX;
						var y = event.clientY;
						box1.style.left = x-offsetx+"px";
						box1.style.top = y-offsety+"px";
						
					};
					document.onmouseup = function()
					{
						document.onmousemove = null;
						document.onmouseup = null;
						alert("onmouseup");
						//取消掉的话，有时松掉鼠标，方块还是会跟着跑动?要把onmouseup时间嵌套在onmousedown时间里面，构成一个完整的事件链，即鼠标点击-移动-松开
						//当鼠标松开时，取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
					};
				};
				
				
			};
		</script>

	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

遇到的问题以及解决办法：

让鼠标在点击box1的位置上，和box1一起移动，而不是跑到box1的左上角；
解决办法：引入offsetLeft和offsetTop,记录鼠标电机的位置相对于box1的坐标；再再移动中，用鼠标的移动坐标（ClientX,ClientY），减去鼠标点击位置相对于box1的偏移坐标，就能得到box1的实际坐标；
关于松开鼠标但是box1还是会跟着跑的问题；
解决办法：起初onmouseup 事件是写在onmousedown时间的外面，松开鼠标但是box1还是会跟着跑的问题；可能是因为异步的原因？？
后来把三个时间都写在一起了，就是鼠标点击事件里面嵌套（这个说法不知道准不准确）鼠标移动事件和鼠标松开事件，构成一个完整的事件链。
onmouseup事件中记得写document.onmouseup = null; ，防止对另外的的onmouseup事件有影响（用完就及时释放）

喃l风

关注

2
点赞
踩
7

收藏

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

练手demo1——鼠标拖拽事件功能：在html中放置一个box1让鼠标能够拖拽着box1在视图中移动思路分析：拖拽的流程当鼠标在被拖拽元素上按下时，对box1对象开始拖拽 onmousedown当鼠标移动时，被拖拽元素在视图范围里面跟随鼠标移动 onmousemove当鼠标松开时，被拖拽元素固定在当前位置 onmouseup<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g
复制链接

扫一扫