1 <html>
2 <head>
3 <title>DIV的移动</title>
4 <style>
5 *
6 {
7 margin:0px;
8 padding:0px;
9 font-family:verdana;
10 font-size:9pt;
11 }
12 #mywin
13 {
14 position:absolute;
15 border:1px solid black;
16 width:200px;
17 height:200px;
18 border-collapse:collapse;
19 font-family:verdana;
20 font-size:9pt;
21 }
22 #titlebar
23 {
24 background-color:#0066cc;
25 color:white;
26 font-family:verdana,tahom,宋体;
27 font-size:9pt;
28 font-weight:bold;
29 width:100%;
30 height:20px;
31 border-style:none;
32 border-collapse:collapse;
33 }
34 </style>
35 <script language=javascript>
36 var divX = 0;
37 var divY = 0;
38 var oldColor = "";
39 var dragColor = "red";
40 isDrag = false;
41 function Initialize()
42 {
43 }
44
45 function titlebar_OnMouseDown()
46 {
47 if (event.srcElement.id == "titlebar")
48 {
49 divX = event.screenX - mywin.offsetLeft;
50 divY = event.screenY - mywin.offsetTop;
51 oldColor = titlebar.style.backgroundColor;
52 try
53 {
54 titlebar.style.backgroundColor = cDragColor.value;
55 dragColor = cDragColor.value;
56 }
57 catch(e)
58 {
59 titlebar.style.backgroundColor = dragColor;
60 }
61 isDrag = true;
62 }
63 }
64
65 function titlebar_OnMouseMove()
66 {
67 if ( isDrag )
68 {
69 cScreenPosition.innerText = "X:"+event.screenX+"px Y:"+event.screenY+"px";
70 cWindowPosition.innerText = "X:"+event.clientX+"px Y:"+event.clientY+"px";
71 mywin.style.left = event.screenX - divX;
72 mywin.style.top = event.screenY - divY;
73 cMyWinPosition.innerText = "X:"+mywin.style.left+" Y:"+mywin.style.top;
74 }
75 }
76
77 function titlebar_OnMouseUp()
78 {
79 isDrag = false;
80 titlebar.style.backgroundColor = oldColor;
81 }
82
83 function titlebar_OnMouseOut()
84 {
85 isDrag = false;
86 titlebar.style.backgroundColor = oldColor;
87 }
88
89 function cWinColor_OnChange()
90 {
91 try
92 {
93 titlebar.style.backgroundColor = cWinColor.value;
94 }
95 catch(e)
96 {
97 return;
98 }
99 }
100
101 function isValidate(str)
102 {
103 if (str.length != 7)
104 {
105 return false;
106 }
107 if (str.lastIndexOf('#') > 0 || str.indexOf('#') < 0)
108 {
109 return false;
110 }
111 var isVal;
112 isVal = true;
113 for(var i=1;i<str.length;i++)
114 {
115 var c = str.charCodeAt(i);
116 if ( c<48 || (c>57 && c<65) || (c>70 && c<97) || c>102 )
117 {
118 isVal = false;
119 break;
120 }
121 }
122 return isVal;
123 }
124 </script>
125 </head>
126
127 <body onselectstart="return false;" oncontextmenu="return false;" onload="Initialize();" onmousedown="titlebar_OnMouseDown();" onmousemove="titlebar_OnMouseMove();" onmouseup="titlebar_OnMouseUp();" onmouseout="titlebar_OnMouseOut">
128 <div id="mywin">
129 <div id="titlebar">
130
131 </div>
132
133 <div id="body">
134 <table style="border-collapse:collapse;width:100%;border-style:none;">
135 <tr>
136 <td width="90">鼠标屏幕位置：</td>
137 <td><label id="cScreenPosition"></label></td>
138 </tr>
139 <tr>
140 <td>鼠标窗口位置：</td>
141 <td><label id="cWindowPosition"></label></td>
142 </tr>
143 <tr>
144 <td>移动窗体位置：</td>
145 <td><label id="cMyWinPosition"></label></td>
146 </tr>
147 <tr>
148 <td>默认窗体颜色：</td>
149 <td>
150 <input id="cWinColor" value="" size="16" onpropertychange="cWinColor_OnChange();"></td>
151 </tr>
152 <tr>
153 <td>拖动窗体颜色：</td>
154 <td>
155 <input id="cDragColor" value="" size="16"></td>
156 </tr>
157 </table>
158 </div>
159 </div>
160 </body>
161
162 </html>
2 <head>
3 <title>DIV的移动</title>
4 <style>
5 *
6 {
7 margin:0px;
8 padding:0px;
9 font-family:verdana;
10 font-size:9pt;
11 }
12 #mywin
13 {
14 position:absolute;
15 border:1px solid black;
16 width:200px;
17 height:200px;
18 border-collapse:collapse;
19 font-family:verdana;
20 font-size:9pt;
21 }
22 #titlebar
23 {
24 background-color:#0066cc;
25 color:white;
26 font-family:verdana,tahom,宋体;
27 font-size:9pt;
28 font-weight:bold;
29 width:100%;
30 height:20px;
31 border-style:none;
32 border-collapse:collapse;
33 }
34 </style>
35 <script language=javascript>
36 var divX = 0;
37 var divY = 0;
38 var oldColor = "";
39 var dragColor = "red";
40 isDrag = false;
41 function Initialize()
42 {
43 }
44
45 function titlebar_OnMouseDown()
46 {
47 if (event.srcElement.id == "titlebar")
48 {
49 divX = event.screenX - mywin.offsetLeft;
50 divY = event.screenY - mywin.offsetTop;
51 oldColor = titlebar.style.backgroundColor;
52 try
53 {
54 titlebar.style.backgroundColor = cDragColor.value;
55 dragColor = cDragColor.value;
56 }
57 catch(e)
58 {
59 titlebar.style.backgroundColor = dragColor;
60 }
61 isDrag = true;
62 }
63 }
64
65 function titlebar_OnMouseMove()
66 {
67 if ( isDrag )
68 {
69 cScreenPosition.innerText = "X:"+event.screenX+"px Y:"+event.screenY+"px";
70 cWindowPosition.innerText = "X:"+event.clientX+"px Y:"+event.clientY+"px";
71 mywin.style.left = event.screenX - divX;
72 mywin.style.top = event.screenY - divY;
73 cMyWinPosition.innerText = "X:"+mywin.style.left+" Y:"+mywin.style.top;
74 }
75 }
76
77 function titlebar_OnMouseUp()
78 {
79 isDrag = false;
80 titlebar.style.backgroundColor = oldColor;
81 }
82
83 function titlebar_OnMouseOut()
84 {
85 isDrag = false;
86 titlebar.style.backgroundColor = oldColor;
87 }
88
89 function cWinColor_OnChange()
90 {
91 try
92 {
93 titlebar.style.backgroundColor = cWinColor.value;
94 }
95 catch(e)
96 {
97 return;
98 }
99 }
100
101 function isValidate(str)
102 {
103 if (str.length != 7)
104 {
105 return false;
106 }
107 if (str.lastIndexOf('#') > 0 || str.indexOf('#') < 0)
108 {
109 return false;
110 }
111 var isVal;
112 isVal = true;
113 for(var i=1;i<str.length;i++)
114 {
115 var c = str.charCodeAt(i);
116 if ( c<48 || (c>57 && c<65) || (c>70 && c<97) || c>102 )
117 {
118 isVal = false;
119 break;
120 }
121 }
122 return isVal;
123 }
124 </script>
125 </head>
126
127 <body onselectstart="return false;" oncontextmenu="return false;" onload="Initialize();" onmousedown="titlebar_OnMouseDown();" onmousemove="titlebar_OnMouseMove();" onmouseup="titlebar_OnMouseUp();" onmouseout="titlebar_OnMouseOut">
128 <div id="mywin">
129 <div id="titlebar">
130
131 </div>
132
133 <div id="body">
134 <table style="border-collapse:collapse;width:100%;border-style:none;">
135 <tr>
136 <td width="90">鼠标屏幕位置：</td>
137 <td><label id="cScreenPosition"></label></td>
138 </tr>
139 <tr>
140 <td>鼠标窗口位置：</td>
141 <td><label id="cWindowPosition"></label></td>
142 </tr>
143 <tr>
144 <td>移动窗体位置：</td>
145 <td><label id="cMyWinPosition"></label></td>
146 </tr>
147 <tr>
148 <td>默认窗体颜色：</td>
149 <td>
150 <input id="cWinColor" value="" size="16" onpropertychange="cWinColor_OnChange();"></td>
151 </tr>
152 <tr>
153 <td>拖动窗体颜色：</td>
154 <td>
155 <input id="cDragColor" value="" size="16"></td>
156 </tr>
157 </table>
158 </div>
159 </div>
160 </body>
161
162 </html>
浙公网安备 33010602011771号