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

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

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

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

效果如图：

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

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

//签到按钮拖拽
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.pageX + ‘px‘;
        dragBox.style.top = touch.pageY + ‘px‘;
    }
}, false);

//拖拽结束，放手
dragBox.addEventListener(‘touchend‘, function(event) {
 //event.preventDefault();//阻止其他事件
 // 如果这个元素的位置内只有一个手指的话
    //拖拽结束，changedTouches列表是涉及当前事件的列表
 if (event.changedTouches.length == 1) {
 var touch = event.changedTouches[0];
 // 判断手指位置，放置元素，如果大于浏览器宽度的一半，则右贴边，小于等于则左贴边
 var halfWidth=window.innerWidth/2;
 if(touch.pageX<=(halfWidth-$(dragBox).width()/2)){
 dragBox.style.left = 20 + ‘px‘;
 dragBox.style.top = touch.pageY + ‘px‘;
 }else{
 dragBox.style.left = (window.innerWidth-$(dragBox).width()-20) + ‘px‘;
 dragBox.style.top = touch.pageY + ‘px‘;
 }
 }
 }, 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触摸实例列表的。

时间： 2024-10-24 22:42:53

html5简单拖拽实现自动左右贴边+幸运大转盘的相关文章

【转】C#.net拖拽实现获得文件路径

C#.net拖拽实现获得文件路径 作者Attilax ,  EMAIL:[email protected] 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), 在DragDrop事件中对“信息”进行解析. 窗体的AllowDrop属性必须设置成true; 且必须有DragEnter事件(单独写DragDrop事件是不会具有拖拽功能的) private void Form1_DragEnter(object sender, DragEventArgs e)

html界面元素拖拽实现［超简单］

就是一个十分简单的小功能,将一个html界面元素从一个地方拖到另一个地方(复制或移动) html部分,省略部分非关键代码 <!-- 被拖拽元素 :draggable属性,表明元素可拖拽--> <div id="ma" class="MA" draggable="true"> A股 </div> <!-- 拖拽目标区域 --> <div id="box" class=&quo

asp.net Repeater拖拽实现排序并同步排序字段到数据库中

数据库表中有一个单位表,里面包括ID.Name.Order等字段,现在有个后台管理功能,可以设置这些单位在某些统计表格中的先后显示顺序,于是想到用拖拽方式实现,这样操作起来更简便. 使用了GifCam软件做了一个示例动画,效果如下图所示: 于是就动手起来,发现jquery.ui中提供sortable函数,可用于排序,界面中从数据库绑定的单位使用Repeater控件,下面简单介绍下主要步骤: 1.项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载,

【WPF】这可能是全网最全的拖拽实现方法的总结

前文 本文只对笔者学习掌握的一般的拖动问题的实现方法进行整理和讨论,包括窗口.控件等内容的拖动. 希望本文能对一些寻找此问题的解决方法的人和一些刚入门的人一些帮助.笔者为WPF初学者,能得到各位的批评指正也是荣幸万分.有更好更多的方法,劳烦与我分享,不胜感激. 本文的各种实现方法其他博客中也都有提及,很多文章内容详实,有图有代码,笔者就不重复造轮子了.就写写自己的一些理解吧. 关键词 Window, UserControls, Drag 参考资料 http://www.cnblogs.com/D

自定义控件(2)-拖拽实现开关切换

在这里,我们的主要工作就是在原有代码的基础上,增加一个重写的onTouchEvent方法,刚添加上来的时候是这个样子的: @Override public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } 对于触摸事件来说,一般返回值为true的话,那么就代表在这里消费掉本次触摸,而返回false的话,就在当前位置对本次触摸不做处理或者不能完全处理,还需要继续将本次事件分发给后续view或者

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

HTML5开发 拖拽文件上传

Drag&Drop 拖拽功能的处理 关于HTML5拖拽文件上传,其实国外已经有很多网站有这样的应用,最早推出拖拽上传应用的是 Gmail,它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送,但其实现在利用HTML5的功能实现,主要借助于新版支持的浏览器来实现,IE还是弱很多. 拖拽上传应用主要使用了以下 HTML5技术: Drag&Drop : HTML5基于拖拽的事件机制.File API : 可以很方便的让 Web 应用访问文件对象,File API 包括FileList.Bl

HTML5简单入门系列（五）

前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的做法是网页不断的询问(向服务器发送请求)是否有可用的更新.通过服务器反馈之后,获得更新. 轮训方案 我们使用上篇HTML5简单入门系列(四)web worker的技术简单实现一下该轮训方案,主动向服务器询问是否有更新. 由于web worker不能访问document等对象,是不能和jQuery连用

HTML5之拖拽(兼容IE和非IE)

前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不