移动端JavaScript - 手指触摸并拖动对象

最新推荐文章于 2024-07-25 14:57:57 发布

原创最新推荐文章于 2024-07-25 14:57:57 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端

课程案例专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用JavaScript在移动端实现手指触摸并拖动对象的功能。首先展示了预期的交互效果，接着讲解了相关的前置知识，包括触屏事件和坐标处理。然后详细阐述了实现这一功能的关键代码，通过监听touchstart、touchmove和touchend事件，更新对象的位置。最后，提到了必要的CSS样式设置，确保元素可以被正确地拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

前置知识

 // 1、手指触摸DOM元素
       div.addEventListener('touchstart', function () {
            console.log('我摸了你');
        })
        // 移动
        div.addEventListener('touchmove', function () {
            console.log('我继续摸');
        })

        //离开
        div.addEventListener('touchend', function () {
            console.log('我摸完了');
        }) 

 //2、触摸事件对象 TouchEvent 
        //touches 正在触摸屏幕的所有手指
        //targetTouches 正在触摸DOM元素的所有手指
        //changedTouches 手指状态发生改变的列表， 从有到无 和 从无到有

实现代码

<body>
    <div></div>
    <script>
        var div = document.querySelector('div'); 
        var startX = 0;  //获取手指一开始点击时的X坐标
        var startY = 0;  //获取手指一开始点击时的Y坐标
        var x = 0;  //获取盒子一开始时的X坐标
        var y = 0;  //获取盒子一开始时的Y坐标

        div.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX; //每触摸一次，获得手指的初始触摸的位置，并存进(startX,startY)
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft; //获得盒子一开始的位置，并存进(x,y)
            y = this.offsetTop;
            //因为pageX pageY offsetLeft offsetTop这种每次点都不一样，把它存进startX和startY里面
        })

        div.addEventListener('touchmove', function (e) {
            var moveX = e.targetTouches[0].pageX - startX;  //moveX是盒子被拖动的距离，它等于手指放开前触摸的地方 - 一开始手指在的地方
            var moveY = e.targetTouches[0].pageY - startY;

            //让盒子距左边和上面的距离等于 x 它原来的距离 加上 moveX移动的距离
            //这里有left和top，题型前面要给div加上 position:absolute;
            this.style.left = x + moveX +'px';
            this.style.top = y + moveY +'px';
        })

    </script>
</body>

样式

<style>
        div {
            position:absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
</style>