当前位置：首页 > article >正文

JS实现拖拽效果（内含源码）

article 2024/9/24 11:22:47

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加了一个鼠标移入移出加了监听事件，而不是对整个页面加了移入移除监听事件。

拖拽效果实现流程

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