移动端拖拽与自动吸附功能

DragXuanfuhongbao('.float-hb','.xb-footer');

/*红包

obj 红包的类名

footer 底部导航的类名

*/

/*拖拽显示*/

function DragXuanfuhongbao(obj,footer){

/*默认状态*/

$(obj).on('touchstart',function(ev){

/*拖拽范围宽高*/

ev.preventDefault();//阻止默认事件

//视口的宽高

var winH = document.body.offsetHeight;

var winW = document.body.offsetWidth;

/*拖拽目标的宽高*/

var circularW = $(obj).width();

var circularH = $(obj).height();

var disL,disT;

//页面滚动的高度

var scrollTop;

var footerH = $(footer).outerHeight();

var LandR;//水平方向上的left值

/*开始拖拽*/

$(obj).on("touchmove",function(ev){

ev.preventDefault();

scrollTop = $('body').scrollTop(); //页面滚动的高度

disL = ev.originalEvent.touches[0].pageX - circularW/2;

disT = ev.originalEvent.touches[0].pageY - circularW/2-scrollTop;

//限制拖拽的范围 (注： 底部如果有底部菜单栏则拖拽范围在其之上)

disL = disL < 0 ? 0 : disL;

disL = disL >winW-circularW  ? winW-circularW : disL;

disT = disT < 0 ? 0 : disT;

disT = disT > winH-circularH ? winH-circularH : disT;

//判断html中有无底部导航

if(footerH=='null'){

disT = disT > winH-circularH ? winH-circularH : disT;

}else{

disT = disT > winH-circularH-footerH ? winH-circularH-footerH : disT;

}

$(this).css({

'left' : disL,

'top' :disT

})

})

//移动结束后，解绑事件

$(document).on("touchend" ,function(){

$(this).unbind('touchmove');

$(this).unbind("touchend");

//自动水平吸附功能

//获取手指抬起时刻 目标的left值 并判断其left值+自身宽度的一半 是否小于等于可视窗口的一半，若小于等于，

则自动水平左吸附，否则 自动水平右吸附

LandR = $(obj).offset().left;

if( (LandR+circularW/2)<=winW/2 ){

$(obj).css('left' , 0);

}else{

$(obj).css('left' ,  winW-circularW);

}

})

})

}