此篇文章主要实现两个功能：

1、点击屏幕下方签到悬浮按钮；

2、弹出幸运大转盘，转盘抽奖签到

效果如图：

鉴于初入前端之路，方法有限，仅供参考。

在网上找了很多移动端拖拽的js实现方式，大部分都是这一种，html5的touch事件，但是没找到点击按钮可以向两边贴边的拖拽，所以汇总网上查阅到的相关资料自己稍微修改了一点。代码如下：

$(function(){//签到按钮拖拽//首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变functionsetCookie(name,value,expires){varoDate=newDate();oDate.setDate(oDate.getDate()+expires);document.cookie=name+'='+value+';expires='+oDate;}functiongetCookie(name){vararr=newArray();arr=document.cookie.split(";");vari=0;for(i=0;i<arr.length;i++){arr2=arr[i].split("=");if(arr2[0]==name){returnarr2[1];}}return'';}functionremoveCookie(name){setCookie(name,'随便什么值，反正都要被删除了',-1);}//判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行，//a和b只需要判断一个就好了varoDiv=document.getElementById('signCorner');vara=getCookie('xPosition');varb=getCookie('yPosition');if(a){oDiv.style.left=a+'px';oDiv.style.top=b+'px';}vardragBox=document.getElementById('signCorner');//拖拽中dragBox.addEventListener('touchmove',function(event){event.preventDefault();//阻止其他事件//如果这个元素的位置内只有一个手指的话if(event.targetTouches.length==1){vartouch=event.targetTouches[0];//元素与手指位置同步dragBox.style.left=touch.clientX+'px';dragBox.style.top=touch.clientY+'px';//由于页面中会有滚动，所以在这不能用pageX和pageY,要用clientXclientY}},false);//拖拽结束，放手dragBox.addEventListener('touchend',function(event){//如果这个元素的位置内只有一个手指的话//拖拽结束，changedTouches列表是涉及当前事件的列表if(event.changedTouches.length==1){vartouch=event.changedTouches[0];//判断手指位置，放置元素，如果大于浏览器宽度的一半，则右贴边，小于等于则左贴边varhalfViewWidth=window.innerWidth/2;varhalfWidth=$(dragBox).width()/2;//手指位置判断,竖直方向，超出屏幕的贴边，水平方向，超出屏幕贴边，//左边左贴边，右边右贴边if((touch.clientX<0)||(touch.clientX>=0&&touch.clientX<=(halfViewWidth-halfWidth))){dragBox.style.left=20+'px';}elseif(touch.clientX>=(halfViewWidth-halfWidth)){dragBox.style.left=(window.innerWidth-20-$(dragBox).width())+'px';}if(touch.clientY<0){dragBox.style.top=20+'px';}elseif(touch.clientY>=window.innerHeight-$(dragBox).height()){dragBox.style.top=(window.innerHeight-$(dragBox).height()-20)+'px';}}dragBox.touchmove=null;dragBox.touchend=null;setCookie('xPosition',oDiv.offsetLeft,1);setCookie('yPosition',oDiv.offsetTop,1);},false);

//签到转盘代码如下：//如果未签到或者未登录显示签到if(IS_SIGN==1||UID==''||UID==0){$("#signCorner").show();}//点击签到图标$("#signCorner").click(function(){if(UID==undefined||UID==0||UID==""){//未登录跳转登录页window.location.href='/index.php?app=wap&mod=Public&act=login';returnfalse;}else{$("#signCorner").hide();$("#signInDrawStart").show();$("#mask").show();}});//点击X关闭$(".signInDraw-close").click(function(){$(this).parent(".signInDraw-turntablebg").hide();$("#mask").hide();location.reload();});//点击遮罩关闭/*$("#mask").click(function(){$(".signInDraw-turntablebg").hide();$("#mask").hide();location.reload();});*///大弹窗转盘$(function(){varrotateTimeOut=function(){$('#rotate').rotate({angle:0,animateTo:2160,duration:8000,callback:function(){alert('网络超时，请检查您的网络设置！');}});};varbRotate=false;varrotateFn=function(awards,angles,txt){bRotate=!bRotate;$('#rotate').stopRotate();$('#rotate').rotate({angle:0,animateTo:angles+1800,duration:8000,callback:function(){$.post(U('activity/Activity/queUserSign'),{uid:awards.uid},function(result){varresults=eval('('+result+')');varattrs='';varsuccession_sign=results.data.succession_sign;if(succession_sign==0){succession_sign=7;}else{varendsuc=7-succession_sign;}if(results.status==1){if(awards.name=="积分"){$(".signInDraw-Congratulate").html(txt);$('#kaquan').hide();$('#hongbao').hide();}elseif(awards.name=="现金红包"){$(".signInDraw-Congratulate").html(txt);$('#jifen').hide();$('#kaquan').hide();}else{$(".signInDraw-Congratulate").html(txt);$('#jifen').hide();$('#hongbao').hide();}if(succession_sign==7){$('#signInDraw-tips1').show();$('#signInDraw-tips').hide();}else{$('#signInDraw-tips1').hide();$("#sSuc").html(succession_sign);$("#endSuc").html(endsuc);}$('#signInDrawLast').show();}else{$(".signInDrawLast").hide();}});bRotate=!bRotate;}})};$('#signInDraw-pointer').click(function(){if(bRotate)return;if(UID==undefined||UID==0||UID==""){//未登录跳转登录页//varurl="<?phpechobase64_encode(U('public/Finance/index'));?>";setTimeout(function(){window.location.href='/index.php?app=wap&mod=Public&act=login';},"0");returnfalse;}varattrs='';$.post(U('activity/Activity/signInActivity'),{uid:UID},function(result){varresults=eval('('+result+')');if(results.status==1){//奖品id，需指定switch(results.data.id){//普通奖励case0:rotateFn(results.data,67,results.info.title);break;case109:rotateFn(results.data,220,results.info.title);break;case110:rotateFn(results.data,220,results.info.title);break;case43:rotateFn(results.data,139,results.info.title);break;case26:rotateFn(results.data,139,results.info.title);break;//宝箱奖励//积分case1:rotateFn(results.data,280,results.info.title);break;case114:rotateFn(results.data,280,results.info.title);break;case89:rotateFn(results.data,280,results.info.title);break;case115:rotateFn(results.data,280,results.info.title);break;case6:rotateFn(results.data,280,results.info.title);break;case66:rotateFn(results.data,280,results.info.title);break;case109:rotateFn(results.data,280,results.info.title);break;case109:rotateFn(results.data,280,results.info.title);break;case109:rotateFn(results.data,280,results.info.title);break;}}else{$("#headerSignPopUp").show();location.reload();}});});});});})

要点提要：

常见js宽度获取：

网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth（包括边线和滚动条的宽）网页可见区域高：document.body.offsetHeight（包括边线的宽）网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高(ff)：document.body.scrollTop网页被卷去的高(ie)：document.documentElement.scrollTop网页被卷去的左：document.body.scrollLeft网页正文部分上：window.screenTop网页正文部分左：window.screenLeft屏幕分辨率的高：window.screen.height屏幕分辨率的宽：window.screen.width屏幕可用工作区高度：window.screen.availHeight屏幕可用工作区宽度：window.screen.availWidth你的屏幕设置是：window.screen.colorDepth位彩色你的屏幕设置：window.screen.deviceXDPI像素/英寸window的页面可视部分实际高度(ff)：window.innerHeight//常用window的页面可视部分实际高度(ff)：window.innerWidth//常用某个元素的宽度：obj.offsetWidth//常用某个元素的高度：obj.offsetHeight//常用某个元素的上边界到body最顶部的距离：obj.offsetTop（在元素的包含元素不含滚动条的情况下）某个元素的左边界到body最左边的距离：obj.offsetLeft（在元素的包含元素不含滚动条的情况下）返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offsetTop（在元素的包含元素含滚动条的情况下）返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offsetLeft（在元素的包含元素含滚动条的情况下）

1、#div1.style.width

2、#div1.offsetWidth

宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度；宽和高是写在行内中，比如，这中情况通过上述2个方法都能拿到宽度。

小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

touch事件

touch事件模型现阶段规定了很多种类型的触摸事件，以下三种是应用最广泛的：

1.Touchstart：手指刚放到屏幕上某个DOM元素里的时候该元素触发

2.Touchmove：手指紧贴屏幕的时候连续触发

3.Touchend：手指从屏幕上抬起的时候触发

在PC触发为以下三个事件：

1.mouseup

2.mousemove(一次)

3.mousedown

这些个事件都会顺着DOM树向上冒泡，并产生一个触摸事件对象。

Touches：表示当前位于屏幕上的所有手指动作的列表，是一个TouchList类型的对象，TouchList是一个类数组对象，它里面装的是Touch对象。表示当前跟踪的触摸操作的touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。(触摸点相对于页面的位置)

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

$(document).bind(touchEvents.touchstart,function(event){event.preventDefault();});$(document).bind(touchEvents.touchmove,function(event){event.preventDefault();});$(document).bind(touchEvents.touchend,function(event){event.preventDefault();});

touches是在屏幕上的所有手指列表，targetTouches是当前DOM上的手指列表，所以当手指移开触发touchend事件时，event.originalEvent是没有这个targetTouches列表的，而changedTouches列表是涉及当前事件的列表，例如touchend事件中，手指移开。touchend事件中应该是只有个changedTouches触摸实例列表的。

参考链接：http://www.qdfuns.com/notes/16601/6fa9adfd052a736092959cdff3d0dd1c.html