JS基础-拖拽-尚硅谷-P118-120

视频链接
视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: #6495ED;
			position: absolute;
		}
		#box2{
			width: 100px;
			height: 100px;
			background-color: #FF0000;
			position: absolute;
			left: 200px;
			top: 200px;
		}
		
			
		</style>
		<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			var box2=document.getElementById("box2");
			drag(box1);
			drag(box2);
		}
		function drag(obj){
			/**
			 * 拖拽:
			 * 1.当鼠标在被拖拽元素上按下时,开始移动 onm ousedown
			 * 2.当鼠标移动时 被拖拽元素跟着移动 onm ousemove
			 * 3.当鼠标松开时,被拖拽元素固定在当前位置 onm ouseup
			 *  
			 */
			
			obj.onmousedown=function(event){
				//这个方法只有IE支持 Chrome会报错 Firefox不报错
				obj.setCapture&&obj.setCapture();
				//div的偏移量 鼠标.clientX-元素.offsetLeft
				// 鼠标.clientY-元素.offsetTop
				event=event||window.event;
				var ol=event.clientX-obj.offsetLeft;
				var ot=event.clientY-obj.offsetTop;
				
				//为document绑定onmousemove
				document.onmousemove=function(event){	
					event=event||window.event;
					var left=event.clientX-ol;
					var top=event.clientY-ot;
					//修改obj的位置
					obj.style.left=left+"px";
					obj.style.top=top+"px";
				};
				document.onmouseup=function(){
					document.onmousemove=null;
					document.onmouseup=null;
					// if(obj.releaseCapture){
					// 	obj.releaseCapture();
					// }	
					obj.releaseCapture&&obj.releaseCapture();
			   }
			   /**
				* 当我们拖拽浏览器内容时 浏览器会自动搜索
				* 此时导致拖拽功能的异常
				* 这是浏览器提供的默认行为
				* 如果不希望 return false
				* 但是IE8这个不起作用
				*/
			   return false;
			};
		}
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

上一篇:Vue中如何用鼠标滑轮进行横向滑动不显示滚动条


下一篇:vue dialog指令 拖拽位置及弹窗宽度拖大 拖小