首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html5简单拖拽实现自动左右贴边+幸运大转盘

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

作者头像
蓓蕾心晴
发布2018-04-12 13:48:45
4.1K0
发布2018-04-12 13:48:45
举报
文章被收录于专栏:前端小叙前端小叙

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

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

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

效果如图:

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

 1 $(function(){
 2 
 3 //签到按钮拖拽
 4 //首先,设置cookie值,使到不同的页面刷新拖拽的按钮位置不会变
 5 function setCookie(name,value,expires){
 6         var oDate=new Date();
 7         oDate.setDate(oDate.getDate()+expires);
 8         document.cookie=name+'='+value+';expires='+oDate;
 9     }
10     function getCookie(name){
11         var arr=new Array();
12         arr=document.cookie.split("; ");
13         var i=0;
14         for(i=0; i<arr.length;i++){
15             arr2=arr[i].split("=");
16             if(arr2[0]==name)
17             {
18                 return arr2[1];
19             }
20         }
21         return '';
22     }
23     function removeCookie(name){
24         setCookie(name,'随便什么值,反正都要被删除了',-1);
25     }
26     //判断a和b的原因是第一次打开,cookie中并没有相应的参数,所以当有参数时执行,
27     // a和b只需要判断一个就好了
28     var oDiv=document.getElementById('signCorner');
29 
30     var a=getCookie('xPosition');
31     var b=getCookie('yPosition');
32     if(a){
33         oDiv.style.left=a+'px';
34         oDiv.style.top=b+'px';
35     }
36     
37 var dragBox = document.getElementById('signCorner');
38 
39 //拖拽中
40 dragBox.addEventListener('touchmove', function(event) {
41     event.preventDefault();//阻止其他事件
42     // 如果这个元素的位置内只有一个手指的话
43     if (event.targetTouches.length == 1) {
44         var touch = event.targetTouches[0];
45         // 元素与手指位置同步
46         dragBox.style.left = touch.clientX + 'px';
47         dragBox.style.top = touch.clientY + 'px';
48         //由于页面中会有滚动,所以在这不能用pageX和pageY,要用clientX  clientY
49 
50     }
51 }, false);
52 
53 //拖拽结束,放手
54 dragBox.addEventListener('touchend',function(event) {
55     // 如果这个元素的位置内只有一个手指的话
56     //拖拽结束,changedTouches列表是涉及当前事件的列表
57     if (event.changedTouches.length == 1) {
58         var touch = event.changedTouches[0];
59         // 判断手指位置,放置元素,如果大于浏览器宽度的一半,则右贴边,小于等于则左贴边
60         var halfViewWidth=window.innerWidth/2;
61         var halfWidth=$(dragBox).width()/2;
62         // 手指位置判断,竖直方向,超出屏幕的贴边,水平方向,超出屏幕贴边,
63         //左边左贴边,右边右贴边
64         if((touch.clientX<0)||(touch.clientX>=0&&touch.clientX<=(halfViewWidth-halfWidth))){
65             dragBox.style.left = 20 + 'px';
66         }else if(touch.clientX>=(halfViewWidth-halfWidth)){
67             dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) + 'px';
68         }
69         if(touch.clientY<0){
70             dragBox.style.top = 20 + 'px';
71         }else if(touch.clientY>=window.innerHeight-$(dragBox).height()){
72             dragBox.style.top = (window.innerHeight-$(dragBox).height()-20) + 'px';
73         }
74     }
75     dragBox.touchmove=null;
76     dragBox.touchend=null;
77     setCookie('xPosition',oDiv.offsetLeft,1);
78     setCookie('yPosition',oDiv.offsetTop,1);
79 },false);

签到转盘代码如下:

  1 //如果未签到 或者 未登录 显示签到
  2 if(IS_SIGN == 1 || UID == '' || UID == 0){
  3     $("#signCorner").show();
  4 }
  5 
  6 //点击签到图标
  7     $("#signCorner").click(function () {
  8         if(UID == undefined || UID == 0 || UID == ""){
  9             //未登录跳转登录页
 10             window.location.href='/index.php?app=wap&mod=Public&act=login';
 11             return false;
 12         }else{
 13             $("#signCorner").hide();
 14             $("#signInDrawStart").show();
 15             $("#mask").show();
 16         }
 17     });
 18     //点击X关闭
 19     $(".signInDraw-close").click(function () {
 20         $(this).parent(".signInDraw-turntablebg").hide();
 21         $("#mask").hide();
 22         location.reload();
 23     });
 24     //点击遮罩关闭
 25     /*$("#mask").click(function(){
 26         $(".signInDraw-turntablebg").hide();
 27         $("#mask").hide();
 28         location.reload();
 29     });*/
 30     //大弹窗转盘
 31     $(function (){
 32         var rotateTimeOut = function (){
 33             $('#rotate').rotate({
 34                 angle:0,
 35                 animateTo:2160,
 36                 duration:8000,
 37                 callback:function (){
 38                     alert('网络超时,请检查您的网络设置!');
 39                 }
 40             });
 41         };
 42         var bRotate = false;
 43         var rotateFn = function (awards, angles, txt){
 44             bRotate = !bRotate;
 45             $('#rotate').stopRotate();
 46             $('#rotate').rotate({
 47                 angle:0,
 48                 animateTo:angles+1800,
 49                 duration:8000,
 50                 callback:function (){
 51                     $.post(U('activity/Activity/queUserSign'),{uid:awards.uid},function(result){
 52                         var results = eval('('+result+')');
 53                         var attrs   = '';
 54                         var succession_sign = results.data.succession_sign;
 55                         if(succession_sign == 0){
 56                             succession_sign = 7;
 57                         }else{
 58                             var endsuc = 7 - succession_sign;
 59                         }
 60                         if (results.status == 1)
 61                         {
 62                             if(awards.name == "积分"){
 63                                 $(".signInDraw-Congratulate").html(txt);
 64                                 $('#kaquan').hide();
 65                                 $('#hongbao').hide();
 66                             }else if(awards.name == "现金红包"){
 67                                 $(".signInDraw-Congratulate").html(txt);
 68                                 $('#jifen').hide();
 69                                 $('#kaquan').hide();
 70                             }else{
 71                                 $(".signInDraw-Congratulate").html(txt);
 72                                 $('#jifen').hide();
 73                                 $('#hongbao').hide();
 74                             }
 75                             if(succession_sign == 7){
 76                                 $('#signInDraw-tips1').show();
 77                                 $('#signInDraw-tips').hide();
 78                             }else{
 79                                 $('#signInDraw-tips1').hide();
 80                                 $("#sSuc").html(succession_sign);
 81                                 $("#endSuc").html(endsuc);
 82                             }
 83                             $('#signInDrawLast').show();
 84                         }else {
 85                             $(".signInDrawLast").hide();
 86                         }
 87                     });
 88                     bRotate = !bRotate;
 89                 }
 90             })
 91         };
 92 
 93         $('#signInDraw-pointer').click(function (){
 94             if(bRotate)return;
 95             if(UID == undefined || UID == 0 || UID == ""){
 96                 //未登录跳转登录页
 97                 // var url = "<?php echo base64_encode(U('public/Finance/index'));?>";
 98                 setTimeout(function () {window.location.href='/index.php?app=wap&mod=Public&act=login';}, "0");
 99                 return false;
100             }
101             var attrs = '';
102             $.post(U('activity/Activity/signInActivity'),{uid:UID},function(result){
103                 var results = eval('('+result+')');
104                 if (results.status == 1)
105                 {
106                     //奖品id,需指定
107 
108                     switch (results.data.id) {
109                         //普通奖励
110                         case 0:
111                             rotateFn(results.data, 67, results.info.title);
112                             break;
113                         case 109:
114                             rotateFn(results.data, 220, results.info.title);
115                             break;
116                         case 110:
117                             rotateFn(results.data, 220, results.info.title);
118                             break;
119                         case 43:
120                             rotateFn(results.data, 139, results.info.title);
121                             break;
122                         case 26:
123                             rotateFn(results.data, 139, results.info.title);
124                             break;
125 
126                         //宝箱奖励
127                         //积分
128                         case 1:
129                             rotateFn(results.data, 280, results.info.title);
130                             break;
131                         case 114:
132                             rotateFn(results.data, 280, results.info.title);
133                             break;
134                         case 89:
135                             rotateFn(results.data, 280, results.info.title);
136                             break;
137                         case 115:
138                             rotateFn(results.data, 280, results.info.title);
139                             break;
140                         case 6:
141                             rotateFn(results.data, 280, results.info.title);
142                             break;
143                         case 66:
144                             rotateFn(results.data, 280, results.info.title);
145                             break;
146                         case 109:
147                             rotateFn(results.data, 280, results.info.title);
148                             break;
149                         case 109:
150                             rotateFn(results.data, 280, results.info.title);
151                             break;
152                         case 109:
153                             rotateFn(results.data, 280, results.info.title);
154                             break;
155                     }
156                 }else {
157                     $("#headerSignPopUp").show();
158                     location.reload();
159                 }
160             });
161         });
162     });
163 });

要点提要:

常见js宽度获取:

 1 网页可见区域宽:document.body.clientWidth
 2 网页可见区域高:document.body.clientHeight
 3 网页可见区域宽:document.body.offsetWidth (包括边线和滚动条的宽)
 4 网页可见区域高:document.body.offsetHeight(包括边线的宽)
 5 网页正文全文宽:document.body.scrollWidth
 6 网页正文全文高:document.body.scrollHeight
 7 网页被卷去的高(ff):document.body.scrollTop
 8 网页被卷去的高(ie):document.documentElement.scrollTop
 9 网页被卷去的左:document.body.scrollLeft
10 网页正文部分上:window.screenTop
11 网页正文部分左:window.screenLeft
12 屏幕分辨率的高:window.screen.height
13 屏幕分辨率的宽:window.screen.width
14 屏幕可用工作区高度:window.screen.availHeight
15 屏幕可用工作区宽度:window.screen.availWidth
16 你的屏幕设置是:window.screen.colorDepth  位彩色
17 你的屏幕设置:window.screen.deviceXDPI  像素/英寸
18 
19 window的页面可视部分实际高度(ff):window.innerHeight //常用
20 window的页面可视部分实际高度(ff):window.innerWidth  //常用
21 
22 某个元素的宽度:obj.offsetWidth  //常用
23 某个元素的高度:obj.offsetHeight //常用
24 
25 某个元素的上边界到body最顶部的距离:obj.offsetTop(在元素的包含元素不含滚动条的情况下)
26 某个元素的左边界到body最左边的距离:obj.offsetLeft(在元素的包含元素不含滚动条的情况下)
27 返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)
28 返回当前元素的左边界到它的包含元素的左边界的偏移量: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节点目标。

1 $(document).bind(touchEvents.touchstart, function (event) {
2       event.preventDefault();          
3 });
4 $(document).bind(touchEvents.touchmove, function (event) {
5       event.preventDefault();           
6 });
7 $(document).bind(touchEvents.touchend, function (event) {
8         event.preventDefault();
9 });

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-02-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档