移动端实现拖拽

Lemon Flower

于 2024-10-30 14:01:17 发布

阅读量894

点赞数 11

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44350560/article/details/118636732

版权

一、触屏事件概述

移动端浏览器兼容性好，不需要考虑以前那些JS的兼容性问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和iOS都有。
touch对象代表一个触摸点，触摸点可以是一根手指、一只触摸笔等等，触摸事件可响应用户手指对屏幕或者触控板的操作。

常见的touch触摸事件
触摸touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touched	手指从一个DOM元素上移开时触发

二、触摸事件对象（touchEvent）

touchEvent是一类描述手指在触摸屏上的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动、触点的增加或减少等等。
touchstart、touchmove、touchend三个事件都有各自的事件对象。

触摸事件对象的三个重点对象列表
触摸列表	说明
touches	正在触摸屏幕的都有手指列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

所以当我们touchend触发手指离开DOM元素时，touches和targetTouches是没有的，只有changedTouches。
正在触摸DOM的第一根手指的相关信息：
var div = document.querySelector('div');
div.addEventListener('touchstart', function(e) {
console.log(e.targetTouches[0]);
});

三、移动端拖动元素

1.touchstart、touchmove、touchend可以实现拖动元素。
2.拖动元素需要当前手指坐标值，用targetTouches[0]里面的pageX和pageY得到。
3.移动端拖动原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离。
4.手指移动的距离：手指滑动的位置-手指刚开始触摸的位置。
分三步：
①触摸元素touchstart：获取手指初始坐标，同时获得盒子原来位置。
②移动手指touchmove：计算手指滑动的距离，并且移动盒子。
③离开手指touchend。

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

实现代码：

html：

<body>
    <div></div>
</body>

css：

<style>
div {
            position: absolute;
            top: 0;
            left: 0;
            height: 100px;
            width: 100px;
            background-color: brown;
        }
</style>

js：

<script>
        var div = document.querySelector('div');
        //全局变量，声明到外面
        var divLeft; //盒子的坐标
        var divTop;
        var startX; //手指的坐标
        var startY;
        div.addEventListener('touchstart', function(e) {
            divLeft = div.offsetLeft;
            divTop = div.offsetTop;
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
        });
        div.addEventListener('touchmove', function(e) {
            //用移动后手指坐标-移动前手指坐标=移动距离
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            //移动距离+盒子原来位置=现在位置
            div.style.left = divLeft + moveX + 'px';
            div.style.top = divTop + moveY + 'px';
            //阻止默认的屏幕滚动
            e.preventDefault();

        })
    </script>