拖动工具泡
2019-12-21 本文已影响0人
squidbrother
概述
一个拖动工具泡，拖动，点击触发事件，做了移动端与PC端兼容
展示：
展示
涉及的点：
1.事件绑定，删除事件，浏览器兼容性
2.阻止浏览器默认事件 兼容
3.拖动 （配置的 吸附与边界）
4.鼠标按下抬起（手指按下抬起）的事件处理函数 与 拖动按钮移动产生冲突 的判定
参数：
fragFn(objId,userOptions,clickEvtFn);
objId:
DOM对象id
userOptions:
adsorb - 拖动结束,进行吸附 / 默认值 false;
limitRange - 限制范围 / 默认值 false;
spaceSide - 距离屏幕边缘的距离 / 默认值0;
clickEvtFn:
点击触发的事件处理函数
html部分
<!DOCTYPE html>
<html style="overflow: hidden; height: 100%;">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- <meta id="viewport" name="viewport" content="width=480,minimal-ui,maximum-scale=1.0"> -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit" />
<!-- 删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true" />
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320" />
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no" />
<title>游戏登录</title>
</head>
<body>
<!--菜单-->
<dl id="popBox" class="popBox">
<dt>菜单
<b id="closeBtn" class="closeBtn">×</b></dt>
<dd>
<p>内容</p>
</dd>
</dl>
<!--功能按钮-->
<div id="gameOptions" class="gameOptions"></div>
<!--游戏区域-->
<div id="mainbox">
<!--占位 游戏真实连接 暂用www.baidu.com-->
<div class="gameBan gameBg">
<!-- <iframe id="gameFrame" src="https://www.baidu.com"></iframe> --></div>
</div>
</body>
</html>
css部分
html{overflow:hidden;height:100%;}body{margin:0;}dl,dt,dd,p{margin:0;padding:0;}html,body{height:100%;-webkit-user-select:none;user-select:none;font-family:PingHei,"Helvetica Neue",Helvetica,"microsoft yahei";font-size:12px;background:#3a3e4a;}#mainbox{transform:scale(1);width:100%;max-width:640px;height:100%;left:0px;top:0px;margin:auto;overflow:hidden;padding:0px;font-family:Arial,宋体;z-index:1000;}#mainbox .gameBan{height:100%;background:#222;}#gameFrame{width:100%;height:100%;border:medium none;overflow-x:hidden;overflow-y:auto;}.gameOptions{position:fixed;left:-20px;top:50%;z-index:999;width:30px;height:30px;padding:10px;cursor:move;background-image:url(data:image/png;base64,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);background-repeat:no-repeat;background-color:rgba(0,0,0,0.8);background-position:center center;opacity:0.5;-webkit-background-size:60%;-moz-background-size:60%;-ms-background-size:60%;-o-background-size:60%;background-size:60%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}.popBox{position:absolute;left:50%;top:50%;z-index:999999;width:300px;height:300px;margin:-150px 0 0 -150px;background:#FFF;border:1px #ccc solid;display:none;}.popBox dt{padding:5px;overflow:hidden;text-align:center;font-size:16px;line-height:1.5em;border-bottom:1px #ccc solid;text-align:left;}.popBox dt .closeBtn{float:right;display:inline-block;width:18px;height:18px;margin:3px 3px 0 0;text-align:center;line-height:18px;background-color:#0077AA;color:#FFF;}.popBox dd{padding:10px;}.popBox dd p{font-size:14px;line-height:1.5em;}.showIt{display:block;}
js部分
;(function(){function offsetL(obj){var result={};while(obj.parentNode){result.l+=obj.offsetLeft;result.t+=obj.offsetTop;obj=obj.parentNode}return result}function myhasClass(obj,cls){cls=cls||'';if(cls.replace(/\s/g,'').length==0)return false;return new RegExp(' '+cls+' ').test(' '+obj.className+' ')}function myaddClass(obj,cls){if(!myhasClass(obj,cls)){obj.className=obj.className==''?cls:obj.className+' '+cls}}function myremoveClass(obj,cls){if(myhasClass(obj,cls)){var newClass=' '+obj.className.replace(/[\t\r\n]/g,'')+' ';while(newClass.indexOf(' '+cls+' ')>=0){newClass=newClass.replace(' '+cls+' ',' ')}obj.className=newClass.replace(/^\s+|\s+$/g,'')}}function setCss3(obj,css3name,value){var str=css3name.charAt(0).toUpperCase()+css3name.substring(1);obj.style['Webkit'+str]=value;obj.style['Moz'+str]=value;obj.style['ms'+str]=value;obj.style['O'+str]=value;obj.style[css3name]=value}function removeCss3(obj,css3name){var str=css3name.charAt(0).toUpperCase()+css3name.substring(1);obj.style['Webkit'+str]='none';obj.style['Moz'+str]='none';obj.style['ms'+str]='none';obj.style['O'+str]='none';obj.style[css3name]='none'}function myBindEvent(obj,evt,fn,captureFn){if(obj.addEventListener){obj.addEventListener(evt,fn,captureFn)}else if(obj.attachEvent){obj.attachEvent('on'+evt,fn)}}function myRemoveEvent(obj,evt,fn){if(obj.removeEventListener){obj.removeEventListener(evt,fn)}else if(obj.detachEvent){obj.detachEvent('on'+evt,fn)}}var browser={versions:function(){var u=navigator.userAgent,app=navigator.appVersion;return{trident:u.indexOf('Trident')>-1,presto:u.indexOf('Presto')>-1,webKit:u.indexOf('AppleWebKit')>-1,gecko:u.indexOf('Gecko')>-1&&u.indexOf('KHTML')==-1,mobile:!!u.match(/AppleWebKit.*Mobile.*/),ios:!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),android:u.indexOf('Android')>-1||u.indexOf('Adr')>-1,iPhone:u.indexOf('iPhone')>-1,iPad:u.indexOf('iPad')>-1,Safari:u.indexOf('Safari')>-1,weixin:u.indexOf('MicroMessenger')>-1,qq:u.match(/\sQQ/i)==" qq"}}(),language:(navigator.browserLanguage||navigator.language).toLowerCase()};function fragFn(objId,userOptions,clickEvtFn){var obj=document.getElementById(objId);var otherEventEle=null,moveToX=0,moveToY=0,objCenterX=0,objCenterY=0,passiveListener={};obj.cantouch=true;obj.screenW=function(){return document.documentElement.clientWidth};obj.screenH=function(){return document.documentElement.clientHeight};defaultOption={'limitRange':false,'adsorb':false,'spaceSide':0};userOptions=Object.assign({},defaultOption,userOptions);var myDragStart='',myDragMove='',myDragEnd='';if(browser.versions.mobile){otherEventEle=obj;myDragStart='touchstart';myDragMove='touchmove';myDragEnd='touchend';passiveListener={passive:true,capture:false}}else{otherEventEle=document;myDragStart='mousedown';myDragMove='mousemove';myDragEnd='mouseup';passiveListener=false}myBindEvent(obj,myDragStart,touchStartFn,passiveListener);function touchStartFn(ev){if(!obj.cantouch){return false}var oEv=ev||window.event;var startX=oEv.type==='touchstart'?oEv.targetTouches[0].pageX:oEv.clientX;var startY=oEv.type==='touchstart'?oEv.targetTouches[0].pageY:oEv.clientY;obj.disX=startX-obj.offsetLeft;obj.disY=startY-obj.offsetTop;myBindEvent(otherEventEle,myDragMove,MoveFn,false);myBindEvent(otherEventEle,myDragEnd,EndFn,passiveListener);obj.clockTimeStart=new Date().getTime();if(!browser.versions.mobile){if(typeof obj.setCapture!=='undefined'){obj.setCapture()}return false}}function MoveFn(ev){if(!obj.cantouch){return false}var oEv=ev||window.event;var moveX=oEv.type==='touchmove'?oEv.targetTouches[0].pageX:oEv.clientX;var moveY=oEv.type==='touchmove'?oEv.targetTouches[0].pageY:oEv.clientY;moveToX=moveX-obj.disX;moveToY=moveY-obj.disY;if(userOptions.limitRange){if(moveToX<0){moveToX=0}else if(moveToX>(obj.screenW()-obj.offsetWidth)){moveToX=obj.screenW()-obj.offsetWidth}if(moveToY<0){moveToY=0}else if(moveToY>(obj.screenH()-obj.offsetHeight)){moveToY=obj.screenH()-obj.offsetHeight}}obj.style.left=moveToX+'px';obj.style.top=moveToY+'px';if(browser.versions.mobile){oEv.preventDefault()}}function EndFn(ev){if(!obj.cantouch){return false}var oEv=ev||window.event;obj.cantouch=false;objCenterX=obj.offsetLeft+obj.offsetWidth/2;objCenterY=obj.offsetTop+obj.offsetHeight/2;if(userOptions.adsorb){if(objCenterX<obj.screenW()/2){obj.style.left=userOptions.spaceSide+'px'}else{obj.style.left=(obj.screenW()-obj.offsetWidth-userOptions.spaceSide)+'px'}setCss3(obj,'transition','all ease 0.3s');clearTimeout(obj.iTimer);obj.iTimer=setTimeout(function(){obj.cantouch=true;removeCss3(obj,'transition')},400)}if(!browser.versions.mobile){if(typeof obj.releaseCapture!='undefined'){obj.releaseCapture()}myRemoveEvent(document,myDragMove,MoveFn);myRemoveEvent(document,myDragEnd,EndFn)};if(new Date().getTime()-obj.clockTimeStart<150){clickEvtFn&&clickEvtFn()}}}fragFn('gameOptions',{adsorb:true,limitRange:true,spaceSide:10},showPopFn);var oPopBox=document.getElementById('popBox');var oCloseBtn=document.getElementById('closeBtn');function showPopFn(){myaddClass(oPopBox,'showIt')}myBindEvent(oCloseBtn,'mouseup',function(){myremoveClass(oPopBox,'showIt')})})();
