在网上搜了很多实现移动层的代码，体验都不太好，于是自己写了，贴在这里先。
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 = 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();