html5简单拖拽实现自动左右贴边+幸运大转盘

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

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

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

效果如图：

​

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

 $(function(){

 //签到按钮拖拽
 //首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变
 function setCookie(name,value,expires){
         var oDate=new Date();
         oDate.setDate(oDate.getDate()+expires);
         document.cookie=name+'='+value+';expires='+oDate;
     }
     function getCookie(name){
         var arr=new Array();
         arr=document.cookie.split("; ");
         var i=0;
         for(i=0; i<arr.length;i++){
             arr2=arr[i].split("=");
             if(arr2[0]==name)
             {
                 return arr2[1];
             }
         }
         return '';
     }
     function removeCookie(name){
         setCookie(name,'随便什么值，反正都要被删除了',-1);
     }
     //判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行，
     // a和b只需要判断一个就好了
     var oDiv=document.getElementById('signCorner');

     var a=getCookie('xPosition');
     var b=getCookie('yPosition');
     if(a){
         oDiv.style.left=a+'px';
         oDiv.style.top=b+'px';
     }

 var dragBox = document.getElementById('signCorner');

 //拖拽中
 dragBox.addEventListener('touchmove', function(event) {
     event.preventDefault();//阻止其他事件
     // 如果这个元素的位置内只有一个手指的话
     if (event.targetTouches.length == 1) {
         var touch = event.targetTouches[0];
         // 元素与手指位置同步
         dragBox.style.left = touch.clientX + 'px';
         dragBox.style.top = touch.clientY + 'px';
         //由于页面中会有滚动，所以在这不能用pageX和pageY,要用clientX  clientY

     }
 }, false);

 //拖拽结束，放手
 dragBox.addEventListener('touchend',function(event) {
     // 如果这个元素的位置内只有一个手指的话
     //拖拽结束，changedTouches列表是涉及当前事件的列表
     if (event.changedTouches.length == 1) {
         var touch = event.changedTouches[0];
         // 判断手指位置，放置元素，如果大于浏览器宽度的一半，则右贴边，小于等于则左贴边
         var halfViewWidth=window.innerWidth/2;
         var halfWidth=$(dragBox).width()/2;
         // 手指位置判断,竖直方向，超出屏幕的贴边，水平方向，超出屏幕贴边，
         //左边左贴边，右边右贴边
         if((touch.clientX<0)||(touch.clientX>=0&&touch.clientX<=(halfViewWidth-halfWidth))){
             dragBox.style.left = 20 + 'px';
         }else if(touch.clientX>=(halfViewWidth-halfWidth)){
             dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) + 'px';
         }
         if(touch.clientY<0){
             dragBox.style.top = 20 + 'px';
         }else if(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';
             return false;
         }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 (){
         var rotateTimeOut = function (){
             $('#rotate').rotate({
                 angle:0,
                 animateTo:2160,
                 duration:8000,
                 callback:function (){
                     alert('网络超时，请检查您的网络设置！');
                 }
             });
         };
         var bRotate = false;
         var rotateFn = 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){
                         var results = eval('('+result+')');
                         var attrs   = '';
                         var succession_sign = results.data.succession_sign;
                         if(succession_sign == 0){
                             succession_sign = 7;
                         }else{
                             var endsuc = 7 - succession_sign;
                         }
                         if (results.status == 1)
                         {
                             if(awards.name == "积分"){
                                 $(".signInDraw-Congratulate").html(txt);
                                 $('#kaquan').hide();
                                 $('#hongbao').hide();
                             }else if(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 == ""){
                 //未登录跳转登录页
                 // var url = "<?php echo base64_encode(U('public/Finance/index'));?>";
                 setTimeout(function () {window.location.href='/index.php?app=wap&mod=Public&act=login';}, "0");
                 return false;
             }
             var attrs = '';
             $.post(U('activity/Activity/signInActivity'),{uid:UID},function(result){
                 var results = eval('('+result+')');
                 if (results.status == 1)
                 {
                     //奖品id，需指定

                     switch (results.data.id) {
                         //普通奖励
                         case 0:
                             rotateFn(results.data, 67, results.info.title);
                             break;
                         case 109:
                             rotateFn(results.data, 220, results.info.title);
                             break;
                         case 110:
                             rotateFn(results.data, 220, results.info.title);
                             break;
                         case 43:
                             rotateFn(results.data, 139, results.info.title);
                             break;
                         case 26:
                             rotateFn(results.data, 139, results.info.title);
                             break;

                         //宝箱奖励
                         //积分
                         case 1:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 114:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 89:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 115:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 6:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 66:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 109:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 109:
                             rotateFn(results.data, 280, results.info.title);
                             break;
                         case 109:
                             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（在元素的包含元素含滚动条的情况下）

js获取Html元素的实际宽度高度：

1、#div1.style.width

2、#div1.offsetWidth

宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度；宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述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触摸实例列表的。

参考链接：原生js完美拖拽，每次刷新可以记住上次拖拽的位置