JS实现拖拽效果(内含源码)

前言

本文主要讲解Js如何实现拖拽效果。把一个方块利用鼠标移动到屏幕内其他位置。

鼠标事件与拖拽关系

想要实现拖拽效果,那鼠标事件是必不可少的,接下来对Js当中所有鼠标事件以及如何触发进行一个说明讲解,以便于在下文对拖拽代码讲解时更顺畅一些。

常用鼠标事件

  • onmousemove:鼠标移动事件,即鼠标在页面或被监听的元素中移动即可触发。
  • onmousedown:鼠标按下事件,鼠标点击时候可分两步,按下和抬起,这个事件在鼠标按下时即可触发,不需等待抬起。
  • onmouseup:鼠标抬起事件,这个为鼠标按下后的抬起才会触发,如果不抬起则不会触发,onmouseup和onmousedown连在一起则为click点击事件。
  • onmouseenter:鼠标移入时触发,如果绑定在页面上,则移入页面就触发一次,如果绑定在某元素,则移入该元素中则触发一次。
  • onmouseout:鼠标移出时触发,如果绑定在页面上,则移出页面就触发,如果绑定在某元素中,则移出该元素就触发一次。onmouseenter和onmouseout常常联合使用。
    实例代码:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="square" style="width:200px;height:200px;border:1px solid gray;"></div>
		<script>
			let square=document.getElementById('square')
			document.onmousedown=function(e){
				console.log('当鼠标被按下时即可触发')
			}
			document.onmousemove=function(e){
				console.log('当鼠标移动时即可触发')
			}
			square.addEventListener('mouseout',function(e){
				console.log('当鼠标移出时即可触发')
			})
			square.addEventListener('mouseenter',function(e){
				console.log('当鼠标移入时即可触发');
			})
			document.onmouseup=function(e){
				console.log('鼠标抬起时触发')
			}
			document.
		</script>
	</body>
</html>

注:鼠标移入为了不混淆页面移入移出和某个元素内移入移出,所以给id为square加了一个鼠标移入移出加了监听事件,而不是对整个页面加了移入移除监听事件。

拖拽效果实现流程

  1. 创建一个id为square的DOMdiv,作为拖拽对象,并给它赋初始CSS,用position:absolute以及top、left对它的初始位置进行定义。并设置宽高、背景颜色等。
  2. js中定义两个值,一个布尔值,一个square,前者是用于判断在监听鼠标移动事件时鼠标是否被按下,是则true,不是则false。square被id为square的元素进行赋值。
  3. 创建三个鼠标监听,分别为鼠标按下(down)、移动(move)、松开(up)事件。
  4. 鼠标按下调用down监听,首先让布尔值为true,也就是确定鼠标已按下,并且对该对象添加四个属性mouseX,mouseY,startX,startY分别把pageX、pageY、square元素距离页面左侧长度offsetLeft、上部长度offsetTop分别赋值进去。按下事件的作用就这些。
  5. 按下后移动则实现拖拽,移动监听事件首先判断布尔是否为true,如果为true则直接下一步,定义两个变量left,top,分别装的是当前移动后的鼠标对标元素的真实位置,这个位置是由三个属性计算得来,分别为鼠标距离页面距离,初始鼠标距离页面距离以及元素对页面距离,计算后加上px分别赋值给top和left,false则直接退出该监听函数,
  6. 最后就是松开函数,松开函数唯一的作用,就是把布尔值变为false,也就是未按下状态,这样在未按下状态监听移动函数就不会继续执行,只会在第一层判断时就退出移动函数。

拖拽效果源码及其文字讲解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#square{
				width:100px;
				height:100px;
				border-radius:10px;
				background-color: #2e93ff;
				position: absolute;
				top:10px;
				left:10px;
			}
		</style>
	</head>
	<body>
		<div id="square"></div>
		<script>
			let isDown=false;
			let square=document.getElementById('square')
			square.addEventListener('mousedown',function(e){
				isDown=true;
				this.mouseX=e.pageX;
				this.mouseY=e.pageY;
				this.startX=square.offsetLeft
				this.startY=square.offsetTop
				// console.log(square.offsetLeft,square.offsetTop);
			})
			square.addEventListener('mousemove',function(e){
				if(!isDown) return false;
				let left=e.pageX-this.mouseX+this.startX
				let top=e.pageY-this.mouseY+this.startY
				this.style.top=top+'px'
				this.style.left=left+'px'
			})
			square.addEventListener('mouseup',function(e){
				isDown=false;
			})
			// document.οnmοusedοwn=function(e){
			// 	console.log('当鼠标被按下时即可触发')
			// }
			// document.οnmοusemοve=function(e){
			// 	console.log('当鼠标移动时即可触发')
			// }
			// square.addEventListener('mouseout',function(e){
			// 	console.log('当鼠标移出时即可触发')
			// })
			// square.addEventListener('mouseenter',function(e){
			// 	console.log('当鼠标移入时即可触发');
			// })
			// document.οnmοuseup=function(e){
			// 	console.log('鼠标抬起时触发')
			// }
		</script>
	</body>
</html>

在上述代码中,我们可以完整看到上述实现流程所有内容,这里主要把最难的部门,也就是计算方式给大家讲解一下:

为什么当前鼠标pageX-初始鼠标pageX+元素起始距离页面位置就可以完美的实现元素移动?
这是因为元素与页面的距离=页面与鼠标距离-鼠标与元素距离,而当前pageX-初始鼠标pageX+元素起始距离页面位置即可实现这个操作。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃巧克li

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值