本文主要包含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';},