手機端觸屏手指滑動方向及拖動層
阿新 • • 發佈：2018-12-05
<!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>