首页 > 其他分享> > 移动端拖动元素

移动端拖动元素

2020-06-06 18:43:15 作者：互联网

移动端拖动元素

touchstart、touchmove、touchend可以实现拖动元素；
拖动元素需要当前手指的坐标值可以使用targetTouches[0]里面的pageX和pageY;
移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离；
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置；

拖动元素三部曲：

触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置；
移动手指touchmove:计算手指滑动距离，并且移动盒子；
离开手指touchend；

注意:手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{margin: 0;;}
		div{width: 60px;height: 60px;background-color: pink;position: relative;}
	</style>
</head>
<body>
	<div></div>
	<script>
		var div=document.querySelector('div');
		//获取手指初始坐标
		var startX=0;
		var startY=0;
		// 获取盒子原先的位置
		var x=0;
		var y=0;
		div.addEventListener("touchstart",function(e){
			//获取手指初始坐标
			startX=e.targetTouches[0].pageX;
			startY=e.targetTouches[0].pageY;
			// 获取盒子原先的位置
			x=this.offsetLeft;
			y=this.offsetTop;
			console.log(x)
			console.log(y)
		});
		div.addEventListener("touchmove",function(e){
			// 计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标
			var moveX=e.targetTouches[0].pageX-startX;
			var moveY=e.targetTouches[0].pageY-startY;
			// y移动盒子
			this.style.left=x+moveX+'px';
			this.style.top=y+moveY+'px';
			e.preventDefault();//阻止屏幕滚动的默认行为
		})
	</script>
</body>
</html>

标签：手指,拖动,元素,targetTouches,var,div,移动
来源： https://blog.csdn.net/weixin_39517183/article/details/106560151