ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 の簡単なドラッグ アンド ドロップで自動左右ウェルティングとラッキー ホイールを実現するサンプル コード

HTML5 の簡単なドラッグ アンド ドロップで自動左右ウェルティングとラッキー ホイールを実現するサンプル コード

黄舟
黄舟オリジナル
2017-03-31 11:58:452272ブラウズ

この記事では主に 2 つの機能を実装しています:

1. 画面の下部にあるサインイン ボタン をクリックして、

Lucky Wheel

をポップアップし、ホイール ドローにサインインします。 新しいフロントエンドジャーニーを考慮して、メソッドは限定されていますが、参考のみとしてください。

モバイルのドラッグアンドドロップのHTML5 の簡単なドラッグ アンド ドロップで自動左右ウェルティングとラッキー ホイールを実現するサンプル コード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 &#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 を通じて幅と高さを取得できます。この場合、幅と高さは style="width:120px;" のようにインラインで記述されます。この場合、幅は #div1.offsetWidth を通じて取得できます。上記の 2 つのメソッドは両方とも幅を取得できます。

要約: id.offsetWidth と id.offsetHeight は、スタイルがスタイルシートに記述されているかインラインに記述されているかに関係なく、要素の幅と高さを取得するときにこれら 2 つの

属性

を使用するのが最善です。属性がインライン スタイルで記述されていない場合、id.style.atrr を通じて属性を取得できないことに注意してください。

タッチイベント

タッチイベントモデル

現在、多くのタイプのタッチイベントが指定されており、最も広く使用されているのは次の 3 つです:

1. タッチスタート: 画面上の DOM 要素に指を置いたとき。要素トリガー

2. Touchmove: 指が画面に近づくと継続的にトリガー

3. Touchend: 指が画面から離れるとトリガー

PC では、次の 3 つのイベントがトリガーされます:

1.mouseup

2.mousemove(once)

3.mousedown

これらのイベントは DOM ツリーに沿ってバブルアップし、タッチ イベント

オブジェクト

を生成します。

Touches: 現在画面上のすべての指の動きのリストを表します。TouchList タイプのオブジェクトであり、Touch オブジェクトが含まれます。現在追跡されているタッチ操作を表すタッチ オブジェクトの配列。

targetTouches: イベント ターゲットに固有の Touch オブジェクトの配列。

changeTouches: 最後のタッチ以降に何が変更されたかを示す Touch オブジェクトの配列。

各 Touch オブジェクトには次のプロパティが含まれます。

clientX: ビューポート内のタッチ ターゲットの x 座標。

clientY: ビューポート内のタッチ ターゲットの y 座標。

識別子: タッチを識別する一意の ID。

pageX: ページ内のタッチ ターゲットの x 座標。 (ページに対するタッチポイントの位置)

pageY: ページ内のタッチターゲットのy座標。

screenX: 画面内のタッチ ターゲットの x 座標。

screenY: 画面内のタッチターゲットのy座標。

ターゲット: 目を引く

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 list には現在のイベント List が含まれます。たとえば、touchend イベントでは、指が離れます。 touchend イベントには、changedTouches タッチ インスタンスのリストのみが存在する必要があります。

以上がHTML5 の簡単なドラッグ アンド ドロップで自動左右ウェルティングとラッキー ホイールを実現するサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。