手机端触屏手指滑动方向及拖动层

最新推荐文章于 2020-12-20 04:48:35 发布

weixin_34216036

最新推荐文章于 2020-12-20 04:48:35 发布

阅读量204

点赞数

文章标签： javascript ViewUI

本文介绍了一种用于手机端触屏的手指滑动方向检测方法，通过监听touchstart和touchmove事件来计算滑动角度，并判断出手指滑动的方向（上、下、左、右）。同时，实现了元素随手指拖动而移动的功能。

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<title>手机端触屏手指滑动方向及拖动层</title>
		<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport">
		<script type="text/javascript">
			var touch_screen = {　　 //方向
				direction: {
					_clientX: 0,
					_clientY: 0,
					_moveX: 0,
					_moveY: 0,
					_startX: 0,
					_startY: 0,
					_object: null,
					_direction: "no",
					_controller: true,
					//开始滑动、拖动
					start: function() {
						var self = this,
							obj = self._object;
						obj.addEventListener('touchstart', function(e) {
							self._startX = e.touches[0].pageX;
							self._startY = e.touches[0].pageY;
							self._clientX = e.touches[0].clientX - parseInt(this.offsetLeft);
							self._clientY = e.touches[0].clientY - parseInt(this.offsetTop);
							self.move();
						}, false);
						obj.addEventListener('touchend', function(e) {
							self._controller = true;
						}, false);
					},
					//拖动滑动时
					move: function() {
						var self = this;
						self._object.addEventListener('touchmove', function(e) {
							if(self._controller) {
								var endX, endY;
								endX = e.changedTouches[0].pageX;
								endY = e.changedTouches[0].pageY;
								var direction = self.get_slide_direction(self._startX, self._startY, endX, endY);
								switch(direction) {
									case 0:
										self._direction = "no";
										break;
									case 1:
										self._direction = "right";
										break;
									case 2:
										self._direction = "left";
										break;
									case 3:
										self._direction = "down";
										break;
									case 4:
										self._direction = "up";
										break;
									default:
								}
								self._controller = false;
							}
							e.preventDefault();
							self._moveX = e.touches[0].clientX - self._clientX;
							self._moveY = e.touches[0].clientY - self._clientY;
							this.style.left = self._moveX + 'px';
							this.style.top = self._moveY + 'px';
							this.innerHTML = self._moveX + "|" + self._moveY + "|" + self._direction
						}, false);
					},
					//计算滑动角度
					get_slide_angle: function(a, b) {
						return Math.atan2(a, b) * 180 / Math.PI;
					},
					//根据角度给出方向
					get_slide_direction: function(a, b, c, d) {
						var dy = b - d;
						var dx = c - a;
						var result = 0;
						if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
							return result
						}
						var angle = this.get_slide_angle(dx, dy);
						if(angle >= -45 && angle < 45) {
							result = 4;
						} else if(angle >= 45 && angle < 135) {
							result = 1;
						} else if(angle >= -135 && angle < -45) {
							result = 2;
						} else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
							result = 3;
						}
						return result;
					},
					//通过一个dom对象进行初始化
					init: function(a) {
						var class_clone = function(source) {
							var result = {};
							for(var key in source) {
								result[key] = typeof source[key] === "object" ? class_clone(source[key]) : source[key];
							}
							return result;
						}
						var self = class_clone(touch_screen.direction);
						self._object = document.getElementById(a);
						if(!self._object) {
							alert('bind_object is not an object');
							return false;
						}
						self.start();
					}
				}
			}

			//页面加载完成
			window.onload = function() {
				touch_screen.direction.init("test_div");
				touch_screen.direction.init("test_div2");
			}
		</script>

		<style type="text/css">
			#test_div,
			#test_div2 {
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				background: #999;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>

	<body>
		<div id="test_div"></div>
		<div id="test_div2"></div>
	</body>

</html>