Touch. drag. js of javascript native mobile drag effect

Provides a variety of official and user-released code examples, code reference, you are welcome to exchange learning mobile phone page up and down drag effect.
Please read: https://git.oschina.net/wuquanyao/touch.drag.js
// ++ ++
// + Author: wuquanyao
// + Email: wqynqa@163.com
// + Nickname: Norwegian Forest
// + Touch. drag-1.0.0.js, beta
// ++ ++
Var Touch = {};
(Function (Touch ){

// ++ ++
// + Config parameter {seletor: '', direction: 1, factor: 1}
// + Selector: css selector;
// + Direction: 0 | 1 | 2, 0 vertical direction, 1 horizontal direction, 2 comprehensive direction;
// + Factor: elastic factor, 0 to 1. The greater the value, the greater the damping.
// ++ ++
Touch. drag = function (config ){

Config = config | {selector: 'body', ction: 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.tar getTouches. length> 1) return false;

Var move = {x: null, y: null };
// X> 0 to the right, x <0 to the left
Move ['X'] = (event. touches [0]. pageX-press ['X']) * (1-config.factor );
// Y> 0 up, y <0 down
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 );

QQ20151027102555.png (150.15 KB download: 35 times)

AD: truly free, domain name + VM + enterprise mailbox = 0 RMB