html5简单拖拽实现自动左右贴边和幸运大转盘的示例代码

百变鹏仔 2个月前 (10-18) #H5教程

文章标签贴边

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

$(function(){ //签到按钮拖拽//首先，设置cookie值，使到不同的页面刷新拖拽的按钮位置不会变function setCookie(name,value,expires){        var oDate=new Date();        oDate.setDate(oDate.getDate()+expires);        document.cookie=name+&#39;=&#39;+value+&#39;;expires=&#39;+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 &#39;&#39;;    }    function removeCookie(name){        setCookie(name,&#39;随便什么值，反正都要被删除了&#39;,-1);    }    //判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行，    // a和b只需要判断一个就好了    var oDiv=document.getElementById(&#39;signCorner&#39;);     var a=getCookie(&#39;xPosition&#39;);    var b=getCookie(&#39;yPosition&#39;);    if(a){        oDiv.style.left=a+&#39;px&#39;;        oDiv.style.top=b+&#39;px&#39;;    }     var dragBox = document.getElementById(&#39;signCorner&#39;); //拖拽中dragBox.addEventListener(&#39;touchmove&#39;, function(event) {    event.preventDefault();//阻止其他事件    // 如果这个元素的位置内只有一个手指的话    if (event.targetTouches.length == 1) {        var touch = event.targetTouches[0];        // 元素与手指位置同步        dragBox.style.left = touch.clientX + &#39;px&#39;;        dragBox.style.top = touch.clientY + &#39;px&#39;;        //由于页面中会有滚动，所以在这不能用pageX和pageY,要用clientX  clientY     }}, false); //拖拽结束，放手dragBox.addEventListener(&#39;touchend&#39;,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 + &#39;px&#39;;        }else if(touch.clientX>=(halfViewWidth-halfWidth)){            dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) + &#39;px&#39;;        }        if(touch.clientY<0){            dragBox.style.top = 20 + &#39;px&#39;;        }else if(touch.clientY>=window.innerHeight-$(dragBox).height()){            dragBox.style.top = (window.innerHeight-$(dragBox).height()-20) + &#39;px&#39;;        }    }    dragBox.touchmove=null;    dragBox.touchend=null;    setCookie(&#39;xPosition&#39;,oDiv.offsetLeft,1);    setCookie(&#39;yPosition&#39;,oDiv.offsetTop,1);},false);

//签到转盘代码如下：//如果未签到 或者 未登录 显示签到if(IS_SIGN == 1 || UID == &#39;&#39; || UID == 0){    $("#signCorner").show();} //点击签到图标    $("#signCorner").click(function () {        if(UID == undefined || UID == 0 || UID == ""){            //未登录跳转登录页            window.location.href=&#39;/index.php?app=wap&mod=Public&act=login&#39;;            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 (){            $(&#39;#rotate&#39;).rotate({                angle:0,                animateTo:2160,                duration:8000,                callback:function (){                    alert(&#39;网络超时，请检查您的网络设置！&#39;);                }            });        };        var bRotate = false;        var rotateFn = function (awards, angles, txt){            bRotate = !bRotate;            $(&#39;#rotate&#39;).stopRotate();            $(&#39;#rotate&#39;).rotate({                angle:0,                animateTo:angles+1800,                duration:8000,                callback:function (){                    $.post(U(&#39;activity/Activity/queUserSign&#39;),{uid:awards.uid},function(result){                        var results = eval(&#39;(&#39;+result+&#39;)&#39;);                        var attrs   = &#39;&#39;;                        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);                                $(&#39;#kaquan&#39;).hide();                                $(&#39;#hongbao&#39;).hide();                            }else if(awards.name == "现金红包"){                                $(".signInDraw-Congratulate").html(txt);                                $(&#39;#jifen&#39;).hide();                                $(&#39;#kaquan&#39;).hide();                            }else{                                $(".signInDraw-Congratulate").html(txt);                                $(&#39;#jifen&#39;).hide();                                $(&#39;#hongbao&#39;).hide();                            }                            if(succession_sign == 7){                                $(&#39;#signInDraw-tips1&#39;).show();                                $(&#39;#signInDraw-tips&#39;).hide();                            }else{                                $(&#39;#signInDraw-tips1&#39;).hide();                                $("#sSuc").html(succession_sign);                                $("#endSuc").html(endsuc);                            }                            $(&#39;#signInDrawLast&#39;).show();                        }else {                            $(".signInDrawLast").hide();                        }                    });                    bRotate = !bRotate;                }            })        };         $(&#39;#signInDraw-pointer&#39;).click(function (){            if(bRotate)return;            if(UID == undefined || UID == 0 || UID == ""){                //未登录跳转登录页                // var url = "<?php echo base64_encode(U(&#39;public/Finance/index&#39;));?>";                setTimeout(function () {window.location.href=&#39;/index.php?app=wap&mod=Public&act=login&#39;;}, "0");                return false;            }            var attrs = &#39;&#39;;            $.post(U(&#39;activity/Activity/signInActivity&#39;),{uid:UID},function(result){                var results = eval(&#39;(&#39;+result+&#39;)&#39;);                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才可以获取到宽度；宽和高是写在行内中，比如，这中情况通过上述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简单拖拽实现自动左右贴边和幸运大转盘的示例代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集