js实现拖拽小练习

拖拽的流程

  1. 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
  2. 当鼠标移动时,被拖拽元素跟随移动 onmousemove
  3. 当鼠标松开时,被拖拽元素被固定 onmouseup

对div或者图片的拖拽

<div id="box1"></div>
 <div id="box2"></div>
 <img src="img/狐狸.jpg" id="img1" style="position: absolute;"/>

要使用户点击图片的位置和拖拽时鼠标的位置一致,要设置div的偏移量

鼠标.clientX-元素.offsetLeft
鼠标.clientY-元素.offsetTop
var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;

提取一个专门用来拖拽的函数

	function drag(obj){
				obj.onmousedown=function(event){
					//求div的偏移量 鼠标.clientX-元素.offsetLeft
					//求div的偏移量 鼠标.clientY-元素.offsetTop
					var ol=event.clientX-obj.offsetLeft;
					var ot=event.clientY-obj.offsetTop;
					
					//为document绑定鼠标跟随事件
					document.onmousemove=function(event){
						//获取鼠标坐标
				    var left=event.clientX-ol;
					var top=event.clientY-ot;
					
					//修改box1的位置
					obj.style.left=left+"px";
					obj.style.top=top+"px";
						
					};
					
					//为document绑定鼠标松开事件
					//不能给box1绑定
					document.onmouseup=function(){
						//取消document.onmousedown事件
						document.onmousemove=false;
					    document.onmouseup=false;//也要取消 
					};
					
				};
			}

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽</title>
		<style type="text/css">
			#box1{
				width: 80px;
				height: 80px;
				background-color: greenyellow;
				position: absolute;
			}
			#box2{
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 100px;
				top: 100px;
			}
			img{
				width: 100px;
				height: 200px;
				left: 300px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				/*
				 * 拖拽box1的流程
				 * 1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
				 * 2.当鼠标移动时,被拖拽元素跟随移动  onmousemove
				 * 3.当鼠标松开时,被拖拽元素被固定 onmouseup
				 */
				
				
				var box1=document.getElementById("box1");
				var box2=document.getElementById("box2");
				var img1=document.getElementById("img1")
				
				//开启拖拽
				drag(box1);
				drag(box2);
				drag(img1);
				
				
				
				//为box1绑定鼠标按下事件
				box1.onmousedown=function(event){
					//求div的偏移量 鼠标.clientX-元素.offsetLeft
					//求div的偏移量 鼠标.clientY-元素.offsetTop
					var ol=event.clientX-box1.offsetLeft;
					var ot=event.clientY-box1.offsetTop;
					
					//为document绑定鼠标跟随事件
					document.onmousemove=function(event){
						//获取鼠标坐标
				    var left=event.clientX-ol;
					var top=event.clientY-ot;
					
					//修改box1的位置
					box1.style.left=left+"px";
					box1.style.top=top+"px";
						
					};
					
					//为document绑定鼠标松开事件
					//不能给box1绑定
					document.onmouseup=function(){
						//取消document.onmousedown事件
						document.onmousemove=false;
					    document.onmouseup=false;//也要取消
					};
				};
			};
			/*
			 * 提取一个专门用来拖拽的函数
			 */
			function drag(obj){
				obj.onmousedown=function(event){
					//求div的偏移量 鼠标.clientX-元素.offsetLeft
					//求div的偏移量 鼠标.clientY-元素.offsetTop
					var ol=event.clientX-obj.offsetLeft;
					var ot=event.clientY-obj.offsetTop;
					
					//为document绑定鼠标跟随事件
					document.onmousemove=function(event){
						//获取鼠标坐标
				    var left=event.clientX-ol;
					var top=event.clientY-ot;
					
					//修改box1的位置
					obj.style.left=left+"px";
					obj.style.top=top+"px";
						
					};
					
					//为document绑定鼠标松开事件
					//不能给box1绑定
					document.onmouseup=function(){
						//取消document.onmousedown事件
						document.onmousemove=false;
					    document.onmouseup=false;//也要取消 
					};
					
				};
			}
		</script>
	</head>
	<body>
		
	     <div id="box1">
	     </div>
	    <div id="box2">	
	    </div>
	    <img src="img/狐狸.jpg" id="img1" style="position: absolute;"/>
	</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值