手机移动端-touch 手指触摸移动事件_nuiapp 怎么左右滑动事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44684357/article/details/109848838

touch：事件可以分为三个 touchstart，touchmove，touchend

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>手指拖拽移动</title>
	<style>
		#con, #con2{
			width: 100px;
			height: 100px;
			background: red
		}
	</style>
</head>
<body>
	<div id="con"></div>
	<div id="con2"></div>
	<script>
		let con = document.getElementById('con'),
			startX , startY, moveX, moveY, disX, disY;
		document.addEventListener('touchstart', function(e){  // 手触碰点击
			startX = e.targetTouches[0].clientX
			startY = e.targetTouches[0].clientY
		})
		document.addEventListener('touchmove', function(e){  // 手拖拽，移动
			moveX = e.targetTouches[0].clientX
			moveY = e.targetTouches[0].clientY
			disX = moveX - startX
			disY = moveY - startY
			// e.target 可以获取手点击的任意元素
			e.target.style.transform = "translate(" + disX + "px," + disY + "px)"
		})
		document.addEventListener('touchend', function(e){  // 手松开
			// 松开手后自动恢复原位置
			e.target.style.transform = "translate(" + 0 + "px," + 0 + "px)"
		})
	</script>
</body>
</html>