![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1 <html>
2 <head>
3 <title>测试可动div</title>
4 <script language='javascript' type='text/javascript'>
5 var offset_x;
6 var offset_y;
7 function Milan_StartMove(oEvent,div_id)
8 {
9 var whichButton;
10 if(document.all&&oEvent.button==1) whichButton=true;
11 else { if(oEvent.button==0)whichButton=true;}
12 if(whichButton)
13 {
14 var oDiv=div_id;
15 offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
16 offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
17 document.documentElement.onmousemove=function(mEvent)
18 {
19 var eEvent;
20 if(document.all) eEvent=event;
21 else{eEvent=mEvent;}
22 var oDiv=div_id;
23 var x=eEvent.clientX-offset_x;
24 var y=eEvent.clientY-offset_y;
25 oDiv.style.left=(x)+"px";
26 oDiv.style.top=(y)+"px";
27
28 }
29 }
30 }
31 function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }
32 function div_Close(o)
33 {
34 var oDiv=o;
35 oDiv.style.display="none";
36 }
37
38 </script>
39 </head>
40 <body>
41 <div id="oDiv1" style="position:absolute;width:200px;height:120px;border:1px solid silver;left:100px;top:100px;z-index:9999;">
42 <div id="move1" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)"
43 style="cursor:move;width:100%;height:30px;background-color:#0066cc; font-size:10px;">
44 <div onclick="div_Close(this.parentNode.parentNode)" style="float:right; width:20px; height:100%; cursor:hand; background-color:#cc3333; color:White;font-size:25px;">X
45 </div>
46 </div>
47 <span>测试1</span>
48 </div>
49
50 <div id="oDiv2" style="position:absolute;width:200px;height:120px;border:1px solid silver;left:100px;top:250px;z-index:9999;">
51 <div id="move2" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)"
52 style="cursor:move;width:100%;height:30px;background-color:#ffbeff; font-size:10px;">
53 <div onclick="div_Close(this.parentNode.parentNode)" style="float:right; width:20px; height:100%; cursor:hand; background-color:#cc3333; color:White;font-size:25px;">X
54 </div>
55 拖动我,嘿嘿
![](https://www.cnblogs.com/Images/dot.gif)
56 </div>
57 <span>测试2</span>
58 </div>
59 </body>
60 </html>
61