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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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>

  

posted @   最骚的就是你  阅读(402)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示