DragXuanfuhongbao('.float-hb','.xb-footer');
/*紅包
obj 紅包的類名
footer 底部導航的類名
*/
/*拖拽顯示*/
function DragXuanfuhongbao(obj,footer){
/*默認狀態(tài)*/
$(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
})
})
//移動結(jié)束后,解綁事件
$(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);
}
})
})
}