移动端拖动元素

最新推荐文章于 2024-10-30 14:01:17 发布

原创最新推荐文章于 2024-10-30 14:01:17 发布 · 951 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#移动端 #拖动元素 #js #touch

javascript 同时被 3 个专栏收录

59 篇文章

订阅专栏

demo

21 篇文章

订阅专栏

移动端

3 篇文章

订阅专栏

本文介绍了如何在移动端实现元素拖动功能，通过监听touchstart、touchmove和touchend事件，结合手指移动的距离来改变元素的位置，实现拖动效果。拖动过程中需计算手指从开始到移动中的位移，并将该位移应用于元素的坐标更新。注意防止页面滚动干扰拖动操作。

移动端拖动元素

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>