知向前端
在移动端拖拽div
2015-8-10 Jon


找了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>












源码来自:http://www.ablanxue.com/prone_11820_1.html

发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容