<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>手机上拖动一个DIV</title>
</head>
<body>
<div id="div" style="100px;height:100px;background-color:red;position:absolute; top:50px; left: 50px;"></div>
<script>
var div = document.getElementById('div');
div.addEventListener('touchmove', function(event) {
event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
div.style.left = (touch.pageX -50)+ 'px';
div.style.top = (touch.pageY -50)+ 'px';
div.style.background = "green";
}
}, false);
</script>
</body>
</html>