鼠标拖拽

最新推荐文章于 2022-05-09 20:21:22 发布

戏命湖

最新推荐文章于 2022-05-09 20:21:22 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_45627570/article/details/101285341

本文介绍如何使用CSS和JavaScript实现网页元素的拖拽功能，详细解释了拖拽流程，包括onmousedown、onmousemove和onmouseup事件的使用，以及如何解决浏览器之间的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<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元素
			 *  - 拖拽的流程
			 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
			 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
			 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
			 */
			
			//获取box1
			var box1 = document.getElementById("box1");
			var box2 = document.getElementById("box2");
			//为box1绑定一个鼠标按下事件
			//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
			box1.onmousedown = function(event){
				
				//设置box1捕获所有鼠标按下的事件
				/*
				 * setCapture()
				 * 	- 只有IE支持，但是在火狐中调用时不会报错，
				 * 		而如果使用chrome调用，会报错
				 */
				/*if(box1.setCapture){
					box1.setCapture();
				}*/
				box1.setCapture && box1.setCapture();
				
				
				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;
					//当鼠标松开时，取消对事件的捕获
					box1.releaseCapture && box1.releaseCapture();//所以采用这行代码
				};
				
				/*
				 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
				 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
				 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
				 * 
				 * 但是这招对IE8不起作用
				 */
				return false;
				
			};
			
			
			
		};
		
		
	</script>
</head>
<body>
	
	我是一段文字
	
	<div id="box1"></div>
	
	<div id="box2"></div>
</body>