javascript原生移动drag效果之touch.drag.js

jerry thinkphp 2015年11月19日收藏

手机页面的上下左右拖动效果.
详情请阅读:https://git.oschina.net/wuquanyao/touch.drag.js

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//+ author:wuquanyao

//+ email:wqynqa@163.com

//+ nickname:挪威森林

//+ touch.drag-1.0.0.js,测试版

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

var Touch = {};

(function(Touch){


    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    //+ config参数{seletor:'',direction:1, factor:1}

    //+ selector:css选择器;

    //+ direction:0|1|2,0垂直方向,1水平方向,2综合方向;

    //+ factor:弹性因子,0到1,值越大,阻尼越大

    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    Touch.drag = function(config){


        config = config || {selector:'body',direction:1,factor:0.7};


        var ele,


            pos    = {x:'',y:''}, 


            press  = {x:'',y:''},


            events = ['touchstart','touchmove','touchend','touchcancel'];


        ele = document.querySelector(config['selector']);


        ele.addEventListener(events[0],function(event){

            

            event.preventDefault();


            pos['x'] = event.currentTarget.getBoundingClientRect().left;


            pos['y'] = event.currentTarget.getBoundingClientRect().top;


            press['x'] = event.touches[0].pageX;


            press['y'] = event.touches[0].pageY;


        },false);

        ele.addEventListener(events[1],function(event){


            event.preventDefault();


            if(event.targetTouches.length>1)return false;


            var move = {x:null,y:null};

            //x>0向右，x<0向左

            move['x'] = (event.touches[0].pageX - press['x'])*(1-config.factor);

            //y>0向上，y<0向下

            move['y'] = (event.touches[0].pageY - press['y'])*(1-config.factor);


            switch(config.direction){


                case 0: translate = 'translate(0,'+move['y']+'px)';

                        break;


                case 1: translate = 'translate('+move['x']+'px,0)';

                        break;


                case 2: translate = 'translate('+move['x']+'px,'+move['y']+'px)'; 

                        break;


                default:translate = 'translate('+move['x']+'px,0)';

            }


            event.currentTarget.style.webkitTransform = translate;


        },false);


        ele.addEventListener(events[2],function(event){            


            event.preventDefault();


            event.currentTarget.style.webkitTransform = 'translate('+pos['x']+'px,'+pos['y']+'px)';


        },false);

    }

})(Touch);