在移动端拖拽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>



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

标签: 移动端拖拽

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap