原生javascript实现div拖拽

最新推荐文章于 2023-11-21 14:45:58 发布
最新推荐文章于 2023-11-21 14:45:58 发布
阅读量326 收藏
点赞数 1
分类专栏： HTML/CSS/JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36014216/article/details/101428614
版权

使用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>

效果截图：

 

TanJ2014
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生javascript实现DIV拖拽并计算重复面积
10-24
主要介绍了使用原生javascript实现DIV拖拽并计算重复面积的方法及示例代码分享，效果十分漂亮,需要的朋友可以参考下
原生js实现div在指定区域内拖拽移动
sinat_35272898的博客
10-22 2311
直接上代码 可拖拽div元素在指定区域内移动，不会超出区域 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
js 实现div拖拽效果
最新发布
m0_67790636的博客
11-21 309
主要原理就是根据addEventListener()方法来绑定事件，添加mousedown、mousemove和mouseup事件监听器，然后通过这些事件返回的坐标参数进而确定div的位置，就做到了指哪打哪的效果。可拖动的div——demo（代码可直接复制运行）
js 实现div的拖动效果
2302_77290281的博客
05-18 900
})
js实现拖动div元素（js实现元素拖动）
热门推荐
Web前端工程师
10-17 1万+
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽div<...
js实现div拖动
src_chao1的博客
02-13 3727
大致思路： 鼠标按下并且移动的时候，使得鼠标点击的div跟随鼠标移动，松开按键或者鼠标移开div时，div不跟随移动。而图层跟随鼠标移动只需要计算出鼠标的移动位置相对于鼠标按下时的原位置，就可以得到偏移量，再用图层的原位置减去偏移量，就是图层的移动后位置。所以大致分为三个步骤。 首先，鼠标的按下事件 let flag = 0; //确定该图层是否鼠标处于按下状态 let oldMX = 0 //鼠标的原X位置 let oldMY = 0 //鼠标的原Y...
JS实现可拖拽div
Dax1_的博客
03-28 1171
注意点 可拖拽元素为绝对定位 分别监听mousedown，mousemove，mouseup三个事件 mousemove事件要判断dragging的值 <div id="box"></div> <style> #box { position: absolute; // 重要 border: 1px solid red; height: 100px; width: 100px; } <
原生javascript实现拖动元素示例代码
12-10
本文介绍原生javascript实现元素拖动。 思路： 1.首先改变被拖动元素的布局属性，关键是“position:absolue”； 2.捕捉鼠标事件”mousedown”,”mousemove”,”mouseup”； 3.当触发”mousedown”时，记录下当前鼠标...
原生JavaScript实现拖动校验功能
01-18
本文实例为大家分享了JavaScript实现拖动校验的具体代码，供大家参考，具体内容如下 思路 1、页面布局采用定位,背景颜色变化bg的宽度为0，其宽度会随着滑块的移动而移动。 页面结构 <!--验证--> <div class=...
【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx
12-29
vue实现页面div盒子拖拽排序功能 　vue 实现页面div盒子拖拽排序功能前言：目前市面上有很多实现拖拽排序功能的插件和方法，本节不过多累述，只讲一种：css3的transition-group方法 　效果图：　1. DOM中使用： 　...
js实现DIV拖拽布局
09-08
js实现DIV拖动布局，可以用来实现自定义桌面
js实现弹出div任意拖拽
08-17
js实现弹出div任意拖拽
页面上可以任意拖动DIV，js实现
06-10
页面上可以任意拖动DIV，js实现的,推荐一下
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
09-18
采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序
js实现限定范围拖拽.html
08-01
实现限定一定范围内进行拖拽操作，代码简单，易学易用！
js让一个div实现拖动效果
2302_77290281的博客
05-22 107
js实现div的拖动效果
JS创建DIV，实现鼠标拖拽效果
qq_46162047的博客
07-21 4127
JS创建DIV，实现鼠标拖拽效果
JS实现DIV的拖动
qq_51076413的博客
05-26 1230
html中实现DIV的拖动功能，JS实现DIV的拖动
原生JS实现div方块拖拽
旅行中的伊蕾娜的博客
07-18 366
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background: red; p.
原生js实现拖拽div
08-07
### 回答1： 我可以提供一些指引：要实现拖拽div，你首先需要监听div的mousedown，mouseup和mousemove事件。然后记录鼠标的坐标，并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2： 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例： 首先，在 HTML 中添加一个可拖拽的 div 元素： ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中，我们可以通过监听一些事件来实现拖拽的效果。首先，我们需要监听 div 的 mousedown 事件，当鼠标按下时开始拖拽。然后，我们需要监听鼠标移动事件来更新 div 的位置。最后，在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中，我们通过计算鼠标点击位置与 div 左上角的偏移量，然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发，从而使得 div 跟随鼠标的移动而移动。最后，当鼠标抬起时，我们需要移除事件监听，停止拖拽。 通过以上代码，我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动时，div 会跟随鼠标的移动而移动，当鼠标抬起时停止拖拽。 ### 回答3： 要实现拖拽div的效果，可以使用原生JavaScript来完成。具体步骤如下： 1. 首先，在HTML中创建一个div元素，并给它设置一个id，用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中，创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器，当鼠标按下时，开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中，记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数，在该函数中，根据鼠标移动的距离，更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数，在该函数中，移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤，我们就可以实现一个简单的原生JavaScript拖拽div效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值