在网上搜了很多实现移动层的代码，体验都不太好，于是自己写了，贴在这里先。
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：[email protected]
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();
JS实现移动层
时间： 2024-10-17 00:43:00