手机上拖动一个DIV 

<!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="width: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>

 

posted @ 2015-07-22 14:31  328201736  阅读(265)  评论(0)  编辑  收藏  举报