手机端简单js拖拽效果

最新推荐文章于 2022-11-11 18:43:49 发布

front_end_fan

最新推荐文章于 2022-11-11 18:43:49 发布

阅读量3.1k

点赞数

文章标签：手机拖拽

本文链接：https://blog.csdn.net/qq_39198420/article/details/77318453

版权

手机专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网上找了好多js实现拖拽效果的demo，但是这是唯一的一个能够实现手机端的拖拽效果，至于android、iphone、华为等手机上的app是否能够正常拖拽，有待测试。先保存下来：

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name="viewport"
          content="
        width = device-width ,
  height = device-height ,
        initial-scale = 1,
        minimum-scale = 1,
        maximum-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';
        }
    }, false);
</script>
</body>
</html>