移动端touch事件——单指拖拽

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <title>2-5单指拖拽</title>
        <style>
            body{
                height: 2000px;
            }
            .backtop{
                position: fixed;
                right: 20px;
                bottom: 20px;
                width: 45px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                background-color: rgba(0,0,0,0.6);
                border-radius: 50%;
                color: #fff;
                font-size: 30px;
                -webkit-tap-highlight-color: transparent;
            }
            
        </style>
    </head>
    <body>
        <a href="#" id="backtop" class="backtop">&uarr;</a>
        <script>
            
            /* diffPoint是和startPoint一个差值，就是移动后和初始值的差值
            
            movePoint是为move函数使用的，表示计算好的移动距离 */
            
            
            function drag(el,options){
                options.x = typeof options.x !== 'undefined' ? options.x : true;
                options.y = typeof options.y !== 'undefined' ? options.y :false;
                
                if(!options.x && !options.y) return;  //如果禁止了x轴和y轴拖动,返回.
                
                var curPoint = {
                    x:0,
                    y:0
                };
                var startPoint = {};
                //move了才触发end,否则不触发end事件
                var isTouchMove = false;
                
                el.addEventListener('touchstart',handleStart,false);
                el.addEventListener('touchmove',handleMove,false);
                el.addEventListener('touchend',handleEnd,false);
                
                function handleStart(ev){
                    var touch = ev.changedTouches[0];
                    
                    startPoint.x = touch.pageX;
                    startPoint.y = touch.pageY;
                }
                function handleMove(ev){
                    //阻止有滚动条的默认行为,也可以在touchstart里面写
                    ev.preventDefault();
                    
                    isTouchMove = true;
                    
                    var touch = ev.changedTouches[0];
                    var diffPoint = {};
                    var movePoint = {
                        x:0,
                        y:0
                    };
                    
                    
                    diffPoint.x = touch.pageX - startPoint.x;
                    diffPoint.y = touch.pageY - startPoint.y;
                    
                    if(options.x){
                        movePoint.x = diffPoint.x + curPoint.x;
                    }
                    if(options.y){
                        movePoint.y = diffPoint.y + curPoint.y;
                    }
                    
                    move(el,movePoint.x,movePoint.y);
                }
                
                
                function handleEnd(ev){
                    if(!isTouchMove) return;
                    
                    //手指抬起时更新curPoint
                    var touch = ev.changedTouches[0];
                    
                    curPoint.x += touch.pageX - startPoint.x;
                    curPoint.y += touch.pageY - startPoint.y;
                    
                    isTouchMove = false;
                }
                
                
                function move(el,x,y){
                    x = x||0;
                    y = y||0;
                    
                    el.style.transform = 'translate3d(' +x+ 'px,' +y+ 'px,0)';
                }
            }
            
        </script>
        <script>
            var backtop = document.getElementById('backtop');
            drag(backtop,{
                x:true,  //表示x轴可以拖动
                y:true   //表示y轴可以拖动
            });
            
/*             var curPoint = {
                x:0,
                y:0
            }
            
            backtop.addEventListener('click',function(){
                move(this,-10+curPoint.x,-10+curPoint.y);
                curPoint.x += -10;
                curPoint.y += -10;
            },false);
            function move(el,x,y){
                x = x || 0;
                y = y || 0;
                el.style.transform = 'translate3d('+x+'px, '+y+'px,0)'
            } */
            
        </script>
    </body>
</html>

 

posted @ 2019-09-24 14:42  是桂  阅读(673)  评论(0)    收藏  举报