拖拽

最新推荐文章于 2024-07-25 16:18:42 发布

易拉易拉罐

最新推荐文章于 2024-07-25 16:18:42 发布

阅读量139

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wuxiao18/article/details/97530222

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何实现拖拽效果：当鼠标点击元素后，元素会跟随鼠标移动，松开鼠标时元素位置固定。同时，调整了元素初始拖动位置为鼠标点击点，并且修改了浏览器的全选搜索样式，通过事件捕获来控制。内容适合进一步封装为可复用的拖拽函数，参数为操作对象。

摘要由CSDN通过智能技术生成

鼠标点击某元素后元素跟随鼠标的移动而移动，鼠标松开后元素的位置固定

1：更改了鼠标的默认位置总是在元素的左上角，更改后使其用户点在哪里就是哪里

2：更改了浏览器对于全选搜素默认样式，运用了捕获来改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">			

			window.onload=function(){
				//拖拽box1
				/*
				 * 1:当鼠标在被拖拽元素按下时，开始拖拽onmosedown
				 * 2:当鼠标移动时被拖拽元素跟随onmousemove
				 * 3:当鼠标松开时，被拖拽元素固定在当前位置onmouseup
				 */
				var box1=document.getElementById("box1");
				
				box1.onmousedown=function(event){
					//为元素设置捕获
					//判断是否有捕获方法
					box1.setCapture && box1.setCapture();
					
					event = event|| window.event;
					//div的偏移量 鼠标.clientX-元素.offsetLeft
					//           鼠标.clientY-元素.offsetTop
                                        //图片解释见下图
					var ol = event.clientX-box1.offsetLeft;
					var ot = event.clientY-box1.offsetTop;
					
					//为document绑定onmousemove事件
					document.onmousemove = function(event){
						//浏览器兼容性问题
						event = event|| window.event;
						//当鼠标移动时被拖拽元素跟随
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					//为元素绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置
						//取消移动
						document.onmousemove = null;
						//位置固定后，鼠标松开事件不再发生
						document.onmouseup = null;
						//当鼠标松开时。取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
					};
					
					/*当我们全选拖拽一个网页内容时，浏览器会默认去搜素引擎中搜素内容
						由此会导致拖拽功能异常，这是浏览器默认行为	可用return false；取消默认行为	
						但它不支持IE8及以下
					 */
					
					return false;
				};	

			
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="box1">
			
		</div>
	</body>
</html>

之后可以将其改为一个函数方便掉用，只需将响应函数调出，形参为obj也就是对象。