拖拽原理问题

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>doc</title>
    <style>
        body {
            height: 500px;
            background-color: papayawhip;
        }

        .to {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            background-color: #dadada;
            color: white;
            font-size: 30px;
            -webkit-tap-highlight-color: transparent;
        }
    </style>
</head>

<body>
    <a id="to" class="to" href="javascript:;">&uarr;</a>
    <script>
        var to = document.getElementById('to');
        var startPoint = {};
        var diffPoint = {};
        to.addEventListener('touchstart', function (e) {
            startPoint.x = e.changedTouches[0].pageX;
            startPoint.y = e.changedTouches[0].pageY;

            console.log('start--' + e.changedTouches[0].pageX + ':' + e.changedTouches[0].pageY);
        });
        to.addEventListener('touchmove', function (e) {
            diffPoint.x = e.changedTouches[0].pageX - startPoint.x;
            diffPoint.y = e.changedTouches[0].pageY - startPoint.y;

            to.style.transform = 'translate3d(' + diffPoint.x + 'px,' + diffPoint.y + 'px,0)';

            console.log('move--' + e.changedTouches[0].pageX + ':' + e.changedTouches[0].pageY);
        });
        to.addEventListener('touchend', function (e) {
            startPoint.x = e.changedTouches[0].pageX;
            startPoint.y = e.changedTouches[0].pageY;

            console.log('end--' + e.changedTouches[0].pageX + ':' + e.changedTouches[0].pageY);
        });
    </script>
</body>

</html>

拖拽简单来讲不就是touchstart事件里求得起始坐标，touchmove事件里求得距离=目标坐标-起始坐标，然后移动这些距离，touchend事件里更新下起始坐标不就行了吗？就像上面的代码一样，但是为啥第二次移动时，明明已更新了startPoint（触发touchend事件更新startPoint为移动后当前的坐标），当触发touchmove事件拖拽的元素会回到最初始的位置(左下角)？
视频中curPoint的作用不理解，难道说是startPoint记录的是移动前的坐标，curPoint记录的是移动后的坐标，当触发touchstart事件时startPoint才更新为当前坐标（也就是curPoint）？

猫有一只猫 2020-02-20

源自：移动端事件 2-6 单指拖拽--拖拽

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-02-20 16:56:15

同学你好，问题解答如下：

1、translate3d方法设置的是移动距离，也就是从起始位置（第一次）移动后的距离。第一次移动是正确的，第二次移动的时候diffPoint对象值是差值，也就是从第一次结束为止开始移动的差值，并没有加上第一次已经移动过的距离，所以还是从起始位置开始移动的。

2、这样理解是可以的。curPoint对象的作用除了记录每一次移动后的位置，当再一次移动的时候，移动差值+curPoint就是translate3d方法需要设置的值。

自己可以再测试理解下。如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

猫有一只猫提问者 #1

是不是translate3d方法永远都以第一次的位置为初始位置？是不是因为这样才要加上curPoint，使用移动差值+curPoint来让translate3d方法从上次移动后的地方接着移动？

2020-02-20 17:18:47
好帮手慕星星回复提问者猫有一只猫 #2

对，是这样的，理解的没有问题。

2020-02-20 17:44:29
猫有一只猫提问者回复好帮手慕星星 #3

1.我刚试了一下mousedown、mousemove、mouseup写pc端的拖拽（代码与移动端的类似，只是换了这三个事件），发现移动时标签内style="transform: translate(0px, 0px);"的更新比较卡顿，没有移动端拖拽更新地顺畅，为啥？代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Doc5</title> <style> * {margin: 0;padding: 0;width: 100%;height: 100%;} body {height: 2000px;} .box {height: 100px;width: 100px;background-color: rgb(248, 203, 0);cursor: pointer;} </style> </head> <body> <div id="box" class="box"></div> <script> var box = document.getElementById('box'); var startPoint = {x: 0,y: 0}; var diffPoint = {x: 0,y: 0}; var movePoint = {x: 0,y: 0}; var curPoint = {x: 0,y: 0}; var toggle = false; box.addEventListener('mousedown', function (e) { startPoint.x = e.pageX; startPoint.y = e.pageY; console.log('down'); toggle = true; }); box.addEventListener('mousemove', function (e) { if (!toggle) return; diffPoint.x = e.pageX - startPoint.x; diffPoint.y = e.pageY - startPoint.y; movePoint.x = diffPoint.x + curPoint.x; movePoint.y = diffPoint.y + curPoint.y; box.style.transform = 'translate(' + movePoint.x + 'px,' + movePoint.y + 'px)'; console.log('move'); }); box.addEventListener('mouseup', function (e) { curPoint.x += e.pageX - startPoint.x; curPoint.y += e.pageY - startPoint.y; console.log('up'); toggle = false; }); </script> </body> </html>

2020-02-20 21:00:12