ace.touch-drag.js
3.11 KB
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
/**
<b>Custom drag event for touch devices</b> used in scrollbars.
For better touch event handling and extra options a more advanced solution such as <u>Hammer.js</u> is recommended.
*/
//based on but not dependent on jQuery mobile
/*
* jQuery Mobile v1.3.2
* http://jquerymobile.com
*
* Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
*/
ace.add_touch_drag = function($) {
if(!ace.vars['touch']) return;
var touchStartEvent = "touchstart MSPointerDown pointerdown",// : "mousedown",
touchStopEvent = "touchend touchcancel MSPointerUp MSPointerCancel pointerup pointercancel",// : "mouseup",
touchMoveEvent = "touchmove MSPointerMove MSPointerHover pointermove";// : "mousemove";
$.event.special.ace_drag = {
setup: function() {
var min_threshold = 0;
var $this = $(this);
$this.on(touchStartEvent, function(event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event,
start = {
//time: Date.now(),
coords: [ data.pageX, data.pageY ],
origin: $(event.target)
},
stop;
//start.origin.trigger({'type' : 'ace_dragStart', 'start':(start || [-1,-1])});
var direction = false, dx = 0, dy = 0;
function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event;
stop = {
coords: [ data.pageX, data.pageY ]
};
// prevent scrolling
//if ( Math.abs(start.coords[1] - stop.coords[1]) > 0 || Math.abs(start.coords[0] - stop.coords[01]) > 0 ) {
//event.preventDefault();
//}
if (start && stop) {
dx = 0;
dy = 0;
direction =
(
Math.abs(dy = start.coords[ 1 ] - stop.coords[ 1 ]) > min_threshold
&&
Math.abs(dx = start.coords[ 0 ] - stop.coords[ 0 ]) <= Math.abs(dy)
)
?
(dy > 0 ? 'up' : 'down')
:
(
Math.abs(dx = start.coords[ 0 ] - stop.coords[ 0 ]) > min_threshold
&&
Math.abs( dy ) <= Math.abs(dx)
)
?
(dx > 0 ? 'left' : 'right')
:
false;
if( direction !== false ) {
var retval = {cancel: false}
start.origin.trigger({
'type': 'ace_drag',
//'start': start.coords,
//'stop': stop.coords,
'direction': direction,
'dx': dx,
'dy': dy,
'retval': retval
})
// prevent document scrolling unless retval.cancel == true
if( retval.cancel == false ) event.preventDefault();
}
}
start.coords[0] = stop.coords[0];
start.coords[1] = stop.coords[1];
}
$this
.on(touchMoveEvent, moveHandler)
.one(touchStopEvent, function(event) {
$this.off(touchMoveEvent, moveHandler);
//start.origin.trigger({'type' : 'ace_dragEnd', 'stop':(stop || [-1,-1])});
start = stop = undefined;
});
});
}
}
}