zoukankan      html  css  js  c++  java
  • 移动端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>
  • 相关阅读:
    element_2对话框
    填报
    润乾报表中进度条的一种实现方式
    列名作为分类值时如何画出统计图
    填报之动态扩展列
    自由格式填报的制作
    复杂报表设计之动态报表
    如何通过动态参数实现周报制作
    如何实现行列互换效果?
    大数据集报表点击表头排序
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11578224.html
Copyright © 2011-2022 走看看