js 拖动盒子 (手机版)

最新推荐文章于 2023-03-27 15:32:31 发布

黄大仙No.1

最新推荐文章于 2023-03-27 15:32:31 发布

阅读量183

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107934039

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 3000px;
        }
        div {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>

    // 拖动元素三部曲:
    // 1.触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
    // 2.移动手指touchmove:计算手指的滑动距离,并且移动盒子
    // 3.离开手指touchend
    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;
    })
    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';
        console.log(div.style.left)
        this.style.top = y + moveY + 'px';
        // 因为手指移动屏幕也会移动,所以阻止屏幕滚动的默认行为
        e.preventDefault()
    })
    div.addEventListener('touchend', function (e) {

    })
</script>
</body>
</html>

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 拖动盒子 (手机版)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 3000px; } div { position: relative; .
复制链接

扫一扫

专栏目录