html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="ball"></div>
<script>
ball = document.getElementById("ball"); // Register touch event handlers
ball.addEventListener('touchstart', process_touchstart, false);
ball.addEventListener('touchmove', process_touchmove, false);
ball.addEventListener('touchcancel', process_touchcancel, false);
ball.addEventListener('touchend', process_touchend, false);
function process_touchstart(e) {
e.preventDefault();
e.target.style.background = "#f01050"
e.target.style.border = "solid 2px #c8eda0"
}
var point = {}
function process_touchmove(e) {
e.preventDefault();
point.x = e.targetTouches[0].clientX;
point.y = e.targetTouches[0].clientY;
// requestAnimationFrame(function() {
e.target.style.top = point.y-50 + "px";
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
background: #282d30;
}
#ball {
width: 80px;
height: 80px;
background: #50a000;
border-radius: 50%;
position: fixed;
left: 150px;
top: 200px;
border: solid 2px #181d20;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run