在移动端拖拽div

2015-8-10 Jon js+jquery+ajax

找了1天的东西，终于找到了，可以在移动端进行跟随手指移动的div实例

		<!doctype html>

<html>

<head>

    <meta charset='utf-8' />

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>手机拖拽</title>

</head>

<body>

    <div id="div" style="width:100px;height:100px;background-color:red;position:absolute;"></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 + 'px';

            div.style.top = touch.pageY + 'px';

            div.style.background = "green";

        }

    }, false);

    </script>

</body>

</html>