原生js小案例：移动端触屏拖动元素

最新推荐文章于 2022-03-25 20:20:09 发布

小龟壳@greaclar

最新推荐文章于 2022-03-25 20:20:09 发布

阅读量1k

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/weixin_50794208/article/details/113858299

版权

前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用事件：

touchstart、touchmove

核心：

上述两个事件中，e.targetTouches[0]对象内部的pageX 和 pageY 属性代表触摸点的X、Y坐标

原理：

手指移动中，计算出手指移动的距离。然后设置盒子位置为：初始位置 + 手指移动的距离

手指移动的距离：

手指滑动中的位置 减去 手指刚开始触摸的位置

步骤：

触摸元素 touchstart：获取手指初始坐标，同时获得盒子初始位置
移动手指 touchmove：计算手指的滑动距离，更新盒子位置（定位中的top和left值）

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

代码：

ps：代码中方法一更容易理解，但代码稍微多一点，但核心思想是一样的

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            // 添加定位
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div>被拖动的盒子</div>
    <script>
        // 方式一
        // （1）开始触摸元素touchstart：获取手指初始坐标，同时获得盒子初始位置
        // （2）移动手指touchmove：计算手指的滑动距离，改变盒子top、left值来移动盒子

        var div = document.querySelector('div');
        // 记录手指初始坐标
        var touchStartX = 0;
        var touchStartY = 0;
        // 记录盒子初始位置
        var divStartX = 0; 
        var divStartY = 0;
        div.addEventListener('touchstart', function(e) {
            // 获取手指初始坐标
            touchStartX = e.targetTouches[0].pageX;
            touchStartY = e.targetTouches[0].pageY;
            // 获取盒子初始位置
            divStartX = this.offsetLeft;
            divStartY = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            // 计算手指的移动距离：手指移动之后的坐标 减去 手指初始的坐标
            var moveX = e.targetTouches[0].pageX - touchStartX;
            var moveY = e.targetTouches[0].pageY - touchStartY;
            // 改变盒子位置(移动)盒子：盒子原来的位置 + 手指移动的距离
            // ps: 记得拼接单位（px）
            this.style.left = divStartX + moveX + 'px';
            this.style.top = divStartY + moveY + 'px';

            e.preventDefault(); // 阻止屏幕滚动的默认行为
        });

        // 方式二
        // （1）开始触摸元素touchstart：获取手指初始坐标，盒子初始位置，前者减去后者得到手指在盒子内的相对坐标。
        // （2）移动手指touchmove：获取手指移动过程的坐标，手指坐标减去相对坐标得到盒子相对手指静止的坐标，赋值给盒子的top、left。
        var relativeX = 0;
        var relativeY= 0;
        div.addEventListener('touchstart', function(e) {
            //  获取手指初始坐标 距离 盒子左上角的x和y方向上距离
            relativeX = e.targetTouches[0].pageX - this.offsetLeft;
            relativeY = e.targetTouches[0].pageY - this.offsetTop;
        });
         div.addEventListener('touchmove', function(e) {
            // 移动的手指坐标 减去 相对坐标，就是盒子相对手指静止的left、top值
            // ps:手中位置减去相对距离，坐标点是往左上角移动
            var moveX = e.targetTouches[0].pageX - relativeX;
            var moveY = e.targetTouches[0].pageY - relativeY;
            // 改变盒子位置(移动)盒子：盒子原来的位置 + 手指移动的距离
            this.style.left = moveX + 'px';
            this.style.top = moveY + 'px';

            e.preventDefault(); // 阻止屏幕滚动的默认行为
        });

    </script>
</body>

小龟壳@greaclar

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
原生js小案例：移动端触屏拖动元素

使用事件：touchstart、touchmove核心：上述两个事件中，e.targetTouches[0]对象内部的pageX 和 pageY 属性代表触摸点的X、Y坐标原理：手指移动中，计算出手指移动的距离。然后设置盒子位置为：初始位置 + 手指移动的距离手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置步骤：触摸元素 touchstart：获取手指初始坐标，同时获得盒子初始位置移动手指 touchmove：计算手指的滑动距离，更新盒子位置（定位
复制链接

扫一扫