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);
}
})
})
}