首页 > 代码库 > JS实现移动层
JS实现移动层
在网上搜了很多实现移动层的代码，体验都不太好，于是自己写了，贴在这里先。
html:
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style> *{margin: 0;padding: 0;} .warp{ width: 400px; height: 300px; border: 1px solid #C2C2C2; border-radius: 3px; position: absolute; top: 10px; left: 10px; z-index: 99; } .move{ width: 400px; height: 50px; background: -webkit-linear-gradient(top,#f2f2f2,#C2C2C2); cursor:move; border-top-left-radius: 3px; border-top-right-radius: 3px; z-index: 100; } .content{ width: inherit; height: 250px;; background: #f2f2f2; } </style></head><body style="width: 100%;height: 1000px;background: red;"><!--移动层begin--> <div class="warp" id="warp"> <div class="move" id="move"></div> <div class="content"></div> </div><!--移动层end--><script src="js/tt.0.0.1.js"></script><script> TT.drag("warp","move");</script></body></html>
JS:
1 /** 2 * _TT 3 * version：0.0.1 4 * author：taozhiwork@foxmail.com 5 */ 6 function TT(){ 7 var _w = window; 8 _d = _w.document; 9 _self = this; 10 /* 11 *拖拽 12 */ 13 this.drag = function moveDivByOtherDiv(moveDiv,dargDiv){ 14 var mDiv = _d.getElementById(moveDiv), 15 dDiv = _d.getElementById(dargDiv), 16 mW = WindowUtil.getPageWidth(), 17 mH = _d.body.offsetHeight, 18 oW = mDiv.offsetWidth, 19 oH = mDiv.offsetHeight, 20 gX = 0, 21 gY = 0; 22 //鼠标在目标层上按下 23 function eMouseDown(event){ 24 var e = event || _w.event; 25 // if(e.button&&e.button!==0){return false;} //鼠标左键点击触发 26 EventUtil.stopPropagationAndPreventDefault(e); 27 gX = e.clientX - OffsetUtil.getElementLeft(mDiv); 28 gY = e.clientY - OffsetUtil.getElementTop(mDiv); 29 dDiv.isMove = true; 30 } 31 //鼠标在document中移动 32 function eMouseMove(event){ 33 var e = event || _w.event, 34 mX = 0, 35 mY = 0; 36 if(!dDiv.isMove){return false;} 37 EventUtil.stopPropagationAndPreventDefault(e); 38 mY = e.clientY-gY; 39 mX = e.clientX-gX; 40 if(mX<0){ 41 mX = 0; 42 }else if(mX>mW-oW){ 43 mX = mW-oW; 44 } 45 if(mY<0){ 46 mY = 0; 47 }else if(mY>mH-oH){ 48 mY = mH-oH; 49 } 50 mDiv.style.top = mY+"px"; 51 mDiv.style.left = mX+"px"; 52 } 53 //鼠标在document上松开 54 function eMouseUp(event){ 55 var e = event || _w.event; 56 EventUtil.stopPropagationAndPreventDefault(e); 57 dDiv.isMove = false; 58 } 59 EventUtil.addHandler(dDiv,"mousedown",eMouseDown); 60 EventUtil.addHandler(_d,"mouseup",eMouseUp); 61 EventUtil.addHandler(_d,"mousemove",eMouseMove); 62 } 63 /* 64 *事件相关函数 65 */ 66 var EventUtil = { 67 //添加事件 68 addHandler : function(element,type,handler){ 69 if(element.addEventListener){ 70 element.addEventListener(type,handler,false); 71 }else if(element.attachEvent){ 72 element.attachEvent("on"+type,handler) 73 }else{ 74 element["on"+type] = handler; 75 } 76 }, 77 //移除事件 78 removeHandler : function(element,type,handler){ 79 if(element.removeEventListener){ 80 element.removeEventListener(type,handler,false); 81 }else if(element.detachEvent){ 82 element.detachEvent("on"+type,handler); 83 }else{ 84 element["on"+type] = null; 85 } 86 }, 87 //阻止事件冒泡 88 stopPropagation : function(e){ 89 if (e.bubbles&&e.stopPropagation){ 90 e.stopPropagation(); 91 }else if(e.cancelBubble){ 92 //阻止IE中冒泡事件 93 e.cancelable = true; 94 } 95 }, 96 //阻止默认事件 97 preventDefault : function(e){ 98 if (e.cancelable&&e.preventDefault){ 99 e.preventDefault();100 }else if(e.returnValue){101 //阻止IE中的默认事件102 e.returnValue = http://www.mamicode.com/false;103 }104 },105 //阻止事件冒泡同时阻止默认事件106 stopPropagationAndPreventDefault : function(e){107 this.stopPropagation(e);108 this.preventDefault(e);109 }110 };111 /*112 *位置相关函数113 */114 var OffsetUtil = {115 //获得元素距离窗口左边距离116 getElementLeft : function(element){117 var actual = element.offsetLeft,118 current = element.offsetParent;119 while(current!==null){120 actual += current.offsetLeft;121 current = current.offsetParent;122 }123 return actual;124 },125 //获得元素距离窗口上边的距离126 getElementTop : function(element){127 var actual = element.offsetTop,128 current = element.offsetParent;129 while(current!==null){130 actual += current.offsetTop;131 current = current.offsetParent;132 }133 return actual;134 }135 };136 /*137 *窗口相关工具函数138 */139 var WindowUtil = {140 //获得页面视口宽度141 getPageWidth : function(){142 var pageWidth = window.innerWidth;143 if(typeof pageWidth != "number"){144 if(document.compatMode == "CSS1Compat"){145 pageWidth = document.documentElement.clientWidth;146 }else{147 pageWidth = document.body.clientWidth;148 }149 }150 return pageWidth;151 },152 //获得页面视口高度153 getPgaeHeight : function(){154 var pageHeight = window.innerHeight;155 if(typeof pageHeight != "number"){156 if(document.compatMode == "CSS1Compat"){157 pageHeight = document.documentElement.clientHeight;158 }else{159 pageHeight = document.body.clientHeight;160 }161 }162 return pageHeight;163 }164 }165 };166 //实例化对象167 var TT = new TT();
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。