js制作div拖动事件，div拖动效果

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

芒果大胖砸

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

阅读量1.4k

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/w161513820/article/details/103074460

版权

js 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

总共使用三个鼠标事件：
onmouseup：鼠标抬起事件
onmousedown：鼠标按下事件
onmousemove：鼠标移动事件

style样式代码

给整个document加相对定位，给要拖动的div加绝对定位

<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background: #00FFFF;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>

body内容

<body>
		<div class="box">
			
		</div>
		
	</body>

js代码

<script type="text/javascript">
			var box=document.querySelector('.box');
			var starX=null;
			var starY=null;
			var left=null;
			var top1 =null;
			box.onmousedown=function(ev){//给要移动的那个div加鼠标按下事件
				ev = ev || window.event;//event做ie兼容
				 starX=ev.pageX;
				 starY=ev.pageY;
				 left=box.offsetLeft;//到父级的左边距离
				 top1 =box.offsetTop;//到父级的顶部距离
				 document.onmousemove=function(ev){//给整个文档加移动事件
					 ev = ev || window.event;
					 var dia=ev.pageX - starX;//鼠标现在的距离减去之前的距离 得到一个差值 
					 var dib=ev.pageY - starY;
					 box.style.top = top1+dib+'px';//重新给box的顶部和left赋值
					 box.style.left=left+dia+'px';
				 }
				document.onmouseup=function(){
					 document.onmousemove=null;//解除绑定移动事件
					 document.onmouseup=null;//解除绑定抬起事件
				 }
				 console.log(starX,starY)
			}
		</script>