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

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

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完美拖拽,每次刷新可以记住上次拖拽的位置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏deepcc

学习js在线html(富文本)编辑器

3.7K70
来自专栏Spring相关

Vue中父组件向子组件传值

37310
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

14620
来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

1K60
来自专栏一“技”之长

iOS动画开发之三——UIView的转场切换 原

        前两篇博客中,我们分别介绍了UIView动画的两种使用方式,分别为,带block的方式:http://my.oschina.net/u/2340...

10010
来自专栏糊一笑

移动端效果之IndexList

写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下: ? 代码请看这里:github 移动端效果之swiper 移动端效果之...

24840
来自专栏编程之旅

iOS开发——制作圆形头像

在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形的。

24220
来自专栏程序员的诗和远方

Tips-移动端滑动固顶效果(position: sticky)

先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 pos...

39560
来自专栏hbbliyong

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件  photo-sphere-viewer.js  ————————————————————————————————————...

91490
来自专栏CRPER折腾记

Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

11010

扫码关注云+社区

领取腾讯云代金券