-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
89 lines (81 loc) · 2.46 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<meta content='width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0;' name='viewport' />
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<title>
Touch Drag
</title>
<style type='text/css'>
/*<![CDATA[*/
.square {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 15px;
left: 15px;
color: white;
text-align: center;
}
/*]]>*/
</style>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var body = $('body')[0];
body.width = $(window).width();
body.height = $(window).height();
var offsetX, offsetY;
var square = $('.square');
square.on('touchstart', function(e){
setOffset(e);
square.on('touchmove', drag);
//square.off('mousedown');
});
square.on('touchend', function(e) {
square.off('touchmove');
});
square.on('mousedown', function(e) {
setOffset(e);
square.on('mousemove', drag);
});
square.on('mouseup', function(e) {
square.off('mousemove');
});
function getPos(e) {
var coord = [];
if (e.originalEvent.touches && e.originalEvent.touches.length) {
coord[0] = e.originalEvent.touches[0].clientX;
coord[1] = e.originalEvent.touches[0].clientY;
} else
{
coord[0] = e.clientX;
coord[1] = e.clientY;
}
return coord;
}
function setOffset(e) {
var coord = getPos(e);
offsetX = coord[0] - square.position().left;
offsetY = coord[1] - square.position().top;
}
function drag(e) {
var coord = getPos(e);
square.css('left', coord[0] - offsetX + 'px');
square.css('top', coord[1] - offsetY + 'px');
return false;
}
});
//]]>
</script>
</head>
<body>
<p>Touch and drag the square around</p>
<div class='square'>
Drag me
</div>
</body>
</html>