移动端touch事件实现拖动元素的效果

mediocrity111

于 2021-06-10 17:00:34 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_52868203/article/details/117785749

笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用HTML、CSS和JavaScript在移动端通过touch事件创建元素拖动效果。首先，HTML定义了一个div作为可拖动元素；接着，CSS部分设置样式，使元素具有交互性；最后，JavaScript监听touch事件，实现元素位置的动态更新，从而达到拖动的效果。

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

html部分是一个div盒子

css部分

    <style>
        div {
            background-color: pink;
            height: 100px;
            width: 100px;
            //这里要加绝对定位或者相对定位
            position: relative;
        }
    <style>

js部分

<script>
    var div = document.querySelector('div');
    //获取手指初始坐标
    var startX = 0;
    var startY = 0;
    //获取盒子原来的位置
    var x = 0;
    var y = 0;
    div.addEventListener('touchstart', function (e) {
 //计算手指的移动距离，手指移动之后的坐标减去手指原来的坐标
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
        //盒子原来的位置加手指移动的距离
        x = this.offsetLeft;
        y = this.offsetTop; 
          //阻止默认的屏幕滚动
        e.preventDefault();
       
    });

    div.addEventListener('touchmove', function (e) {

        //计算手指的移动距离，手指移动之后的坐标减去手指原来的坐标
        var moveX = e.targetTouches[0].pageX - startX;
        var moveY = e.targetTouches[0].pageY - startY;
        //盒子原来的位置加手指移动的距离
        this.style.left = x + moveX + 'px';
        this.style.top = y + moveY + 'px';
        //阻止默认的屏幕滚动
        e.preventDefault();
    })
</script>