移动端拖滑到指定位置demo

喵喵冲不动了

于 2022-07-26 15:17:05 发布

阅读量234

点赞数

分类专栏：基本技术文章标签： html css 前端

本文链接：https://blog.csdn.net/jhg4123/article/details/125995466

版权

基本技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性：

1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。

2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，

targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，

为第二个手指的触摸点，因为第二个手指是引发事件的原因

3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值

4. 手指滑动时，三个值都会发生变化

5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。

6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，

此值为最后一个离开屏幕的手指的接触点。

2. 触点坐标选取

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数

touchmove:function(e,参数一){

　　var e=arguments[0]

　　e.preventDefault()

}

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>移动端拖拽</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
            border: 1px solid #000;
        }

        .target {
            width: 200px;
            height: 200px;
            background: lightcoral;
            position: absolute;
            z-index: 1;
        }

        .border {
            z-index: 0;
            width: 202px;
            height: 202px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #000;
        }

        span {
            font-size: 50px;
            margin-left: 25px;
        }
    </style>
</head>


<body>
    <div id="inp">1123333</div>
    <div class="container">
            <div class="target"></div>
            <div class="border"></div>
    </div>
    <script>
        load()
        function load() {
            document.addEventListener('touchstart', touch, false);
            document.addEventListener('touchmove', touch, false);
            document.addEventListener('touchend', touch, false);
            function touch(event) {
                var event = event || window.event;
                var oInp = document.getElementById("inp");
                switch (event.type) {
                    case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break;
                    case "touchend": oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break;
                    case "touchmove": event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break;
                }
            }
        }
        window.addEventListener('load', load, false);
        window.onload = function () {
            var maxW = document.documentElement.clientWidth;
            var maxH = document.documentElement.clientHeight;
            // document.querySelector('.container').style.width = maxW;
            var target = document.querySelector('.target');
            var startX = 0;
            var startY = 0;
            var leftX = 0
            var topY = 0;
            target.addEventListener('touchstart', function (e) {
                //鼠标在图片中位置
                startX = e.targetTouches[0].pageX - this.offsetLeft;
                startY = e.targetTouches[0].pageY - this.offsetTop;
            });
            //鼠标e.targetTouches[0].pageX当前X位置
            //图像this.offsetLeft当前Left位置
            //鼠标在图片中位置 startX startY
            //图片距父级的边距 leftX topY
            target.addEventListener('touchmove', function (e) {
                leftX = e.targetTouches[0].pageX - startX;
                topY = e.targetTouches[0].pageY - startY;
                var thisW = e.targetTouches[0].target.clientWidth;
                var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
                var thisH = e.targetTouches[0].target.clientHeight;
                var parentH = e.targetTouches[0].target.offsetParent.clientHeight;
                if (leftX <= 0) {
                    leftX = 0;
                }
                if (leftX >= parentW - thisW) {
                    leftX = parentW - thisW;
                }
                if (topY <= 0) {
                    topY = 0;
                }
                if (topY >= parentH - thisH) {
                    topY = parentH - thisH;
                }
                this.style.left = leftX + 'px';
                this.style.top = topY + 'px';
                this.innerHTML = '我又被揪起来了，真烦人!';
            });
            target.addEventListener('touchend', function (e) {
                // console.log(leftX);
                // console.log(maxW / 2 - target.clientWidth / 2);
                // console.log(maxW / 1.8 + target.clientWidth / 1.8);
                if (leftX > maxW / 2 - target.clientWidth
                    && leftX < maxW / 2 + target.clientWidth * 0.2
                    && topY > maxH / 2 - target.clientHeight
                    && topY < maxH / 2 + target.clientHeight * 0.2
                ) {
                    target.style.transition = 'all 1s'
                    target.style.left = (maxW / 2 - target.clientWidth / 2) + 'px';
                    target.style.top = (maxH / 2 - target.clientHeight / 2) + 'px';
                    setTimeout(() => {
                        target.style.transition = 'all 0s'
                    }, 1000);
                } else {
                    target.style.left = 0;
                    target.style.top = '3%';
                }
                this.innerHTML = '你终于放弃揪着我了，谢谢!';
            });

        };
    </script>


</body>


</html>

touches：表示当前跟踪的触摸操作的touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

: 当前屏幕上所有触摸点(⼿指)的列表;

touches

: 当前DOM元素上所有触摸点(⼿指)的列表;

targetTouches

: 涉及当前事件的触摸点(⼿指)的列表 changedTouches 通过⼀个例⼦来区分⼀下触摸事件中的这三个属性：⽤⼀个⼿指接触屏幕，触发事件，此时这三个属性有相同的值。⽤第⼆个⼿指接触屏幕，此时，touches有两个元素，每个⼿指触摸点为⼀个值。当两个⼿指触摸相同元素时，targetTouches和 touches的值相同，否则targetTouches 只有⼀个值。changedTouches此时只有⼀个值，为第⼆个⼿指的触摸点。⽤两个⼿指同时接触屏幕，此时changedTouches有两个值，每⼀个⼿指的触摸点都有⼀个值⼿指滑动时，三个值都会发⽣变化⼀个⼿指离开屏幕，touches和targetTouches中对应的元素会同时移除，⽽changedTouches仍然会存在元素。⼿指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有⼀个值，此值为最后⼀个离开屏幕的⼿指的接触点。