js实现拖拽功能Drag（并用Vue封装成自定义指令v-drag）

Monster”

已于 2022-03-07 11:02:01 修改

阅读量636

点赞数

文章标签： javascript vue 前端

于 2022-03-01 21:54:26 首次发布

本文链接：https://blog.csdn.net/qq_38876917/article/details/123217278

版权

首先是三个事件，分别是mousedown，mousemove，mouseup。
当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。
clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetLeft和offsetTop来表示元素的元素的初始坐标。
也就是说定位信息为：鼠标移动时候的坐标 - 鼠标按下去时候的坐标 + 元素初始情况下的坐标（元素.offetLeft/offetTop）。
总结为：鼠标移动时候的坐标 - 鼠标相对于元素的坐标（在mousedown中就要定义）
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的left以及top等等值。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src='../Vuedemo/vue.js'></script>
	<title>鼠标拖拽元素实现</title>
	<style type="text/css">
		*{
			margin: 0px;
		}
		#demo {
			width: 100px;
			height: 100px;
			position: absolute;
			background: red;
			}
	</style>
</head>
<body>
	<div id="app" >
		<div id="demo" v-drag></div>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{},
			methods:{},
			directives:{
				drag(el,binding){
					var isDrag = false;
					//鼠标事件1 - 鼠标点击的时候（标记元素为可拖动）
					el.addEventListener('mousedown', function(e) {
						var e = e || window.event;
						mouseOffsetX = e.offsetX;  //鼠标相对于被触发元素的位置
						mouseOffsetY = e.offsetY;  
						isDrag = true;
					})
					//鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
					document.onmouseup = function(e) {
						isDrag = false;
					}
					//鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动）
					document.onmousemove = function(e) {
						var e = e || window.event;
						var mouseX = e.clientX; //鼠标当前的位置
						var mouseY = e.clientY;
						if (isDrag) {
						//获取页面宽度高度
							var pageWidth = window.innerWidth;
							var pageHeight = window.innerHeight;
						//获取元素的宽高
							var elWidth = el.offsetWidth; 
							var elHeight = el.offsetHeight;
						//最大能够移动的距离
							var maxX = pageWidth-elWidth; 
							var maxY = pageHeight-elHeight;
						// 鼠标移动的距离
							var moveX = mouseX- mouseOffsetX;
							var moveY = mouseY - mouseOffsetY;
						//给元素设置移动限制
							var moveX = Math.min(maxX, Math.max(0, moveX));
							var moveY = Math.min(maxY, Math.max(0, moveY));
						// 给元素的宽高赋值
							el.style.left = moveX + 'px';
							el.style.top = moveY + 'px';
							
						}
					};
				}
			}
		})
	</script>
</body>
</html>

Monster”

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现拖拽功能Drag（并用Vue封装成自定义指令v-drag）

首先是三个事件，分别是mousedown，mousemove，mouseup。当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的元素的初始坐标。也就是说定位信息为：鼠标移动时候的坐标 - 鼠标按下去时候的坐标 + 元素初始情况下的坐标（元素.offetLeft/offetTop）。总结为：鼠标移动时候的坐标 - 鼠标相对于元素.
复制链接

扫一扫