ホームページ > 記事 > ウェブフロントエンド > HTML5 の簡単なドラッグ アンド ドロップで自動左右ウェルティングとラッキー ホイールを実現するサンプル コード
この記事では主に 2 つの機能を実装しています:
1. 画面の下部にあるサインイン ボタン をクリックして、
Lucky Wheelをポップアップし、ホイール ドローにサインインします。 新しいフロントエンドジャーニーを考慮して、メソッドは限定されていますが、参考のみとしてください。
モバイルのドラッグアンドドロップの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 ''; } function removeCookie(name){ setCookie(name,'随便什么值,反正都要被删除了',-1); } //判断a和b的原因是第一次打开,cookie中并没有相应的参数,所以当有参数时执行, // a和b只需要判断一个就好了 var oDiv=document.getElementById('signCorner'); var a=getCookie('xPosition'); var b=getCookie('yPosition'); if(a){ oDiv.style.left=a+'px'; oDiv.style.top=b+'px'; } 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.clientX + 'px'; dragBox.style.top = touch.clientY + 'px'; //由于页面中会有滚动,所以在这不能用pageX和pageY,要用clientX clientY } }, false); //拖拽结束,放手 dragBox.addEventListener('touchend',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 + 'px'; }else if(touch.clientX>=(halfViewWidth-halfWidth)){ dragBox.style.left = (window.innerWidth-20-$(dragBox).width()) + 'px'; } if(touch.clientY<0){ dragBox.style.top = 20 + 'px'; }else if(touch.clientY>=window.innerHeight-$(dragBox).height()){ dragBox.style.top = (window.innerHeight-$(dragBox).height()-20) + 'px'; } } dragBox.touchmove=null; dragBox.touchend=null; setCookie('xPosition',oDiv.offsetLeft,1); setCookie('yPosition',oDiv.offsetTop,1); },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 幅と高さは #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 サイトの他の関連記事を参照してください。