Einfaches HTML5-Drag-and-Drop, um einen automatischen Links- und Rechtsrahmen und einen Glücksrad-Beispielcode zu erhalten

Dieser Artikel implementiert hauptsächlich zwei Funktionen:

1. Klicken Sie auf die schwebende Anmeldeschaltfläche am unteren Bildschirmrand.

🎜>Lucky Wheel

, Karussell-Lotterie-Anmeldung

Da Sie neu im Frontend sind, sind die Methoden begrenzt und dienen nur als Referenz.

Ich habe viele

js

-Implementierungsmethoden für mobiles Drag & Drop im Internet gefunden. Die meisten davon sind von dieser Art, HTML5s Touch event , aber ich konnte keine Klickschaltfläche finden, um sie auf beide Seiten zu ziehen, also habe ich die relevanten Informationen, die ich online gefunden habe, zusammengestellt und sie ein wenig modifiziert. Der Code lautet wie folgt:

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

Wichtige Punkte:

//签到转盘代码如下：
//如果未签到 或者 未登录 显示签到
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(&#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();
                }
            });
        });
    });
});
})

Allgemeine js-Breitenerfassung:

js-Erfassung des tatsächlichen Werts von

网页可见区域宽：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（在元素的包含元素含滚动条的情况下）

HTML-Element

Breite und Höhe: 1, #div1.style.width

2, #div1.offsetWidth

Die Breite und Höhe werden in geschrieben Stylesheet, z. B. #div1{width :120px;}. In diesem Fall kann die Breite nicht über #div1.style.width ermittelt werden, aber die Breite kann über #div1.offsetWidth ermittelt werden. Die Breite und Höhe werden hier inline geschrieben, z. B. style="width:120px;". In diesem Fall kann die Breite über #div1.offsetWidth ermittelt werden. Beide oben genannten Methoden können die Breite ermitteln.

Zusammenfassung: Da id.offsetWidth und id.offsetHeight unabhängig davon, ob der Stil im Stylesheet oder inline geschrieben ist, ist es am besten, diese beiden

Attribute

zu verwenden, wenn wir die Breite und erhalten Höhe des Elements. Beachten Sie, dass Attribute, die nicht im Inline-Stil geschrieben sind, nicht über id.style.atrr abgerufen werden können. Berührungsereignis

Berührungsereignis

Modell

Derzeit werden viele Arten von Berührungsereignissen spezifiziert. Die folgenden drei werden am häufigsten verwendet:1 . Touchstart: Das Element wird ausgelöst, wenn der Finger gerade auf einem DOM-Element auf dem Bildschirm platziert wird

2. Touchmove: Kontinuierlich ausgelöst, wenn sich der Finger in der Nähe des Bildschirms befindet

3. Touchend: Das Finger wird vom Bildschirm bewegt. Wird ausgelöst, wenn er angehoben wird.

wird auf dem PC durch die folgenden drei Ereignisse ausgelöst:

1.mouseup

2.mousemove (once)

3. Diese Mousedown

-Ereignisse sprudeln entlang des DOM-Baums und generieren ein Touch-Ereignis-

-Objekt

. Touches: Stellt eine Liste aller Fingerbewegungen dar, die sich derzeit auf dem Bildschirm befinden. Es handelt sich um ein Objekt vom Typ TouchList, ein Klassenobjekt

array

, das Touch-Objekte enthält. Ein Array von Berührungsobjekten, die die aktuell verfolgten Berührungsvorgänge darstellen. targetTouches: Array von Touch-Objekten, die für Ereignisziele spezifisch sind.

changeTouches: Ein Array von Touch-Objekten, das angibt, was sich seit der letzten Berührung geändert hat.

Jedes Touch-Objekt enthält die folgenden Eigenschaften.

clientX: Die x-Koordinate des Touch-Ziels im Ansichtsfenster.

clientY: Die y-Koordinate des Berührungsziels im Ansichtsfenster.

Kennung: Eine eindeutige ID, die die Berührung identifiziert.

pageX: Die x-Koordinate des Berührungsziels auf der Seite. (Die Position des Berührungspunkts relativ zur Seite)

pageY: Die y-Koordinate des Berührungsziels auf der Seite.

screenX: Die x-Koordinate des Berührungsziels auf dem Bildschirm.

screenY: Die y-Koordinate des Berührungsziels auf dem Bildschirm.

Ziel: das auffällige

DOM-Knoten-

Ziel.

touches ist eine Liste aller Finger auf dem Bildschirm, targetTouches ist eine Liste aller Finger auf dem aktuellen DOM. Wenn sich der Finger also wegbewegt, um das touchend-Ereignis auszulösen, verfügt event.originalEvent nicht über dies Die Liste „targetTouches“ und „changedTouches“ ist eine Liste, die sich auf das aktuelle Ereignis bezieht, z. B. das Touchend-Ereignis, wenn der Finger entfernt wird. Im Touchend-Ereignis sollte nur eine Liste der geänderten Touches-Touch-Instanzen vorhanden sein.

$(document).bind(touchEvents.touchstart, function (event) {
      event.preventDefault();          
});
$(document).bind(touchEvents.touchmove, function (event) {
      event.preventDefault();           
});
$(document).bind(touchEvents.touchend, function (event) {
        event.preventDefault();
});

Das obige ist der detaillierte Inhalt vonEinfaches HTML5-Drag-and-Drop, um einen automatischen Links- und Rechtsrahmen und einen Glücksrad-Beispielcode zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!