<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>touchmove</title>
<style>
#tm{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 30px;
background-color: blue;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<div id="tm">touchmove</div>
<script>
var obj = document.getElementById('tm');
obj.addEventListener('touchstart', function(event){
obj.style.backgroundColor = 'red';
});
obj.addEventListener('touchend', function(event){
obj.style.backgroundColor = 'blue';
obj.innerHTML = 'touchmove';
});
obj.addEventListener('touchmove', function(event) {
event.preventDefault();
var touch = event.targetTouches[0];
obj.style.left = touch.pageX-50 + 'px';
obj.style.top = touch.pageY-50 + 'px';
obj.innerHTML = 'x:' + touch.pageX + ', y:' + touch.pageY;
}, false);
</script>
</body>
</html>
