此篇文章主要实现两个功能：
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触摸实例列表的。
以上就是 html5简单拖拽实现自动左右贴边和幸运大转盘的示例代码的详细内容。