使用 vue 实现拖拽的简单案例，不会超出可视区域

时间：2025-04-04 16:43:08

实现拖拽之前，先了解几个小常识：

这两种获取鼠标坐标的方法，区别在于基于的对象不同：

  • pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
  • clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；
  1. clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离
  2. clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离
  3. offsetWidth: 用来获取当前拖拽元素 自身的宽度
  4. offsetHeight:用来获取当前拖拽元素 自身的高度 
  5. ：屏幕的可视高度
  6. ：屏幕的可视高度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue实现拖拽</title>
		<script src="./js/"></script>
	</head>
	<style>
		*{margin: 0;padding:0;}
	    #app{
	        position: relative;     /*定位*/
	        top: 10px;
	        left: 10px;
	        width: 80px;
	        height: 80px;
	        background: #666;       /*设置一下背景*/
	    }
	</style>
	<body>
		<div  @mousedown="move">
			{{positionX}}
			{{positionY}}
		</div>
	</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			positionX: 0,
			positionY: 0
		},
		methods: {
			move(e){
				let odiv = ;// 获取目标元素
				
				//计算出鼠标相对点击元素的位置,获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
				let x =  - ;
				let y =  - ;
				(,)
				 = (e) => {
					// 获取拖拽元素的位置
					let left =  - x;
					let top =  - y;
					 = left;
					 = top;
					//(,)
					// 把拖拽元素 放到 当前的位置
					if (left <= 0) {
						left = 0;
					} else if (left >=  - ){
						// 屏幕的可视宽度
						left =  - ;
					}
					
					if (top <= 0) {
						top = 0;
					} else if (top >=  - ){
						//  屏幕的可视高度
						top =  - 
						
					}
					 = left + "px";
					 = top + "px"
					
				}
                // 为了防止 火狐浏览器 拖拽阴影问题
				 = (e) => {
					 = null;
            		 = null
				}
			}
		}
	})
</script>
</html>

 

相关文章