简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  HTML5 simple drag and drop to achieve automatic left and right welting and lucky wheel sample code

HTML5 simple drag and drop to achieve automatic left and right welting and lucky wheel sample code

黄舟
黄舟Original
2017-03-31 11:58:452253browse

This article mainly implements two functions:

1. Click the sign-in floating button at the bottom of the screen;

2. Pop-up Lucky Wheel, Roulette Lottery Sign-in

HTML5 simple drag and drop to achieve automatic left and right welting and lucky wheel sample code

In view of the new entry into the front-end, the methods are limited and are for reference only.

I have found a lot of js implementation methods for mobile drag and drop on the Internet. Most of them are of this kind, html5 touch event , but I couldn’t find a click button to drag to both sides, so I compiled the relevant information I found online and modified it a little. The code is as follows: 

$(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 &#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();
                }
            });
        });
    });
});
})

Summary of key points:

Common js width acquisition: 

网页可见区域宽：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 acquisition of the actual width and height of Html element :

1, #div1.style.width

2, #div1.offsetWidth

The width and height are written in the style sheet, such as #div1{width:120px;}. In this case, the width cannot be obtained through #div1.style.width, but the width can be obtained through #div1.offsetWidth; the width and height are written inline, such as style="width:120px;", in this case, the width can be obtained through #div1.offsetWidth. Both of the above two methods can get the width.

Summary, because id.offsetWidth and id.offsetHeight regardless of whether the style is written in the style sheet or inline, it is best to use these two attributes when we obtain the width and height of the element. Note that if the attributes are not written in the inline style, they cannot be obtained through id.style.atrr.

touch event

touch eventModelCurrently, many types of touch events are specified. The following three are the most widely used:

1 . Touchstart: When the finger is just placed on a DOM element on the screen, the element triggers

2. Touchmove: When the finger is close to the screen, the element triggers continuously

3. Touchend: The finger moves from the screen Triggered when the mouse is lifted

is triggered on the PC as the following three events:

1.mouseup

2.mousemove (once)

3. mousedown

These events will bubble up along the DOM tree and generate a touch eventobject.

Touches: Represents a list of all finger movements currently on the screen. It is an object of type TouchList. TouchList is a class array object, which contains Touch objects. An array of touch objects representing the currently tracked touch operations.

targetTouches: Array of Touch objects specific to event targets.

changeTouches: An array of Touch objects that represents what has changed since the last touch.

Each Touch object contains the following properties.

clientX: The x coordinate of the touch target in the viewport.

clientY: The y coordinate of the touch target in the viewport.

identifier: A unique ID that identifies the touch.

pageX: The x coordinate of the touch target in the page. (The position of the touch point relative to the page)

pageY: The y coordinate of the touch target in the page.

screenX: The x coordinate of the touch target on the screen.

screenY: The y coordinate of the touch target on the screen.

target: The striking DOM node target. 

$(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 is a list of all fingers on the screen, targetTouches is a list of fingers on the current DOM, so when the finger moves away to trigger the touchend event, event.originalEvent does not have this targetTouches list, and the changedTouches list is List of events related to the current event, such as touchend event, finger removed. There should be only a list of changedTouches touch instances in the touchend event.

The above is the detailed content of HTML5 simple drag and drop to achieve automatic left and right welting and lucky wheel sample code. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Sharing code examples of using indexdb in html5 (pictures and text)Next article：Sharing code examples of using indexdb in html5 (pictures and text)

Related articles

See more