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

简介:

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

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

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


效果如图:

wKioL1iZGL-xV4uCAAHVKdGY1W8242.png-wh_50

wKiom1iZGMfSvYLVAAHPuaJSGIU011.png-wh_50


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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
$( 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 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
//签到转盘代码如下:
//如果未签到 或者 未登录 显示签到
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宽度获取:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
网页可见区域宽: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节点目标。

1
2
3
4
5
6
7
8
9
$(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触摸实例列表的。




本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1895499,如需转载请自行联系原作者
相关文章
|
2月前
|
移动开发 前端开发 应用服务中间件
前端——html拖拽原理
前端——html拖拽原理
28 0
|
10月前
|
移动开发 JavaScript API
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序
46 0
|
Web App开发 移动开发 前端开发
html5 h5 draggable的理解,及其实现拖拽功能
事件是由行为触发的,但是一个行为不止可以触发一个事件,可以触发多个事件
html5 h5 draggable的理解,及其实现拖拽功能
|
移动开发 HTML5 容器
分享html5的一个拖拽手法
  就是这样的效果:拖拽之前        之后:          上代码: html5 drag and drop *[draggable=true] { -moz-us...
5491 0
|
移动开发 HTML5
HTML5抽奖转盘
在线演示 本地下载
1777 0
|
移动开发 JSON JavaScript
|
移动开发 HTML5 JavaScript
|
Web App开发 移动开发 JavaScript
【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:《海贼王》中的主角路飞在“顶上战争两年前”,会在一些危急关头“不经意”地使用霸王色霸气,但对”霸气“的结构体系和具体运用都不太了解,这让他在香波地群岛等诸多重大战役中大吃苦头。
1347 0
|
移动开发 HTML5 前端开发
一步步用HTML5动手写个图片拖拽上传预览组件
详情参考:一步步用HTML5动手写个图片上传预览组件H5中拖拽事件有: [ - ] DragDrop:拖放完成,也就是鼠标拖入对象并在拖放区域释放。 [ - ] DragEnter :拖放进入,也就是鼠标拖放对象进入拖放区域。
801 0