原生javascript实现div拖拽

最新推荐文章于 2024-07-17 09:19:35 发布

TanJ2014

最新推荐文章于 2024-07-17 09:19:35 发布

阅读量346

点赞数 1

分类专栏： HTML/CSS/JS

本文链接：https://blog.csdn.net/sinat_36014216/article/details/101428614

版权

HTML/CSS/JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

使用javascript实现div拖拽

效果查看地址：https://tanj2014.github.io/javascript/04drag/drag.html

代码下载地址：https://github.com/TanJ2014/javascript/blob/master/04drag/drag.html

更多javascript练手小例子：https://github.com/TanJ2014/javascript

鼠标放在深蓝色区域，按下即可拖动。还可以点击回放拖动轨迹按钮查看轨迹。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽效果</title>
	<style>
		html,body{
			overflow:hidden;
		}
		body,div,h2,p{
			margin:0;
			padding:0;
		}
		body{
			color:#333;
			background:#fff;
			font:12px/2 Arial;
		}
		p{
			padding:0 10px;
			margin-top:10px;
		}
		span{
			color:#ff0;
			padding-left:5px;
		}
		#box{
			position:absolute;
			width:300px;
			height:150px;
			background:#EAF6FE;
			box-shadow: 2px 2px 10px rgba(0,0,0,.2);
			top:40%;
			left:40%;
		}
		#box h2{
			height:36px;
			cursor:move;
			background:#108CED;
			color: white;
			border-bottom:1px solid #108CED;
			text-align:right;
			padding:0 10px;
		}
		#box h2 a{
			color:#fff;
			font:12px/25px Arial;
			text-decoration:none;
			outline:none;
		}
	</style>
</head>
<body>
	<div id="box">
		 <h2 id="nav">
		 	<a id="click" href="javascript:;">点击回放拖动轨迹</a>
		 </h2>
		 <p>
		 	鼠标放在深蓝色区域，按下即可拖动。
		 还可以点击回放拖动轨迹。
		 </p>
	</div>
	<script>
		window.onload = function(){
			function $(id){
				return document.getElementById(id);
			}
			//获取需要使用到的元素
			var box = $("box"),
				nav = $("nav"),
				click = $("click");

			var distX = 0,//鼠标距离box左边的距离
				distY = 0;//鼠标距离box上边的距离
			var posArr = [];//存储box移动的路径
			var isMove = false;//开始移动了吗

			//鼠标按下，激活拖拽
			nav.addEventListener("mousedown",function(e){
				//记录此时box的位置
				boxT = box.offsetTop;
				boxL = box.offsetLeft;
				//将初始的状态保存
				posArr.push({x:box.offsetLeft,y:box.offsetTop});
				//计算鼠标距离box左上边距的距离
				distX = e.clientX - box.offsetLeft;
				distY = e.clientY - box.offsetTop;
				isMove = true;
			})
			//拖拽开始
			document.addEventListener("mousemove",function(e){
				if(!isMove) return;

				//box的left 与 top数值
				var oL = e.clientX - distX;
				var oT = e.clientY - distY;

				var maxL = document.documentElement.clientWidth - box.offsetWidth;
				var maxT = document.documentElement.clientHeight - box.offsetHeight;
				//拖拽不能超出屏幕边界
				if(oL<0){
					oL = 0;
				}else if(oL>maxL){
					oL = maxL;
				}

				if(oT<0){
					oT = 0;
				}else if(oT>maxT){
					oT = maxT;
				}

				box.style.left =  oL + "px";
				box.style.top =  oT + "px";

				//将路径记录在数组中
				posArr.push({x:oL,y:oT});	
				console.log(posArr);		
			})
			//鼠标松开，拖拽结束
			document.addEventListener("mouseup",function(e){
				isMove = false;
			})
			//点击回放拖拽路径
			click.addEventListener("click",function(e){
				if (posArr.length == 0) return;
				var timer =  setInterval(function(){
					var pos = posArr.pop();
					if(pos){
						box.style.left =  pos.x + "px";
						box.style.top =  pos.y + "px";
					}else{
						clearInterval(timer);
					}
				},20);
				return false;
			})
			//阻止事件冒泡
			click.addEventListener("mousedown",function(e){
				e.cancelBubble = true;
			})
		}
	</script>
</body>
</html>

效果截图：