怎样使得一个层可以随意拖动?

1<div id="MoveDiv" style="position:absolute;left:200;top:50;width:100;height:300;background:blue">
2<div onmousedown="MDown(MoveDiv)" style="position:absolute;left:0;top:0;width:100;height:20;background:red">   
3按这里移动   
4</div>
5</div>

 1<script>   
 2var Obj=''   
 3document.onmouseup=MUp   
 4document.onmousemove=MMove   
 5  
 6function MDown(Object){   
 7Obj=Object.id   
 8document.all(Obj).setCapture()   
 9pX=event.x-document.all(Obj).style.pixelLeft;   
10pY=event.y-document.all(Obj).style.pixelTop;   
11}   
12  
13function MMove(){   
14if(Obj!=''){   
15document.all(Obj).style.left=event.x-pX;   
16document.all(Obj).style.top=event.y-pY;   
17}   
18}   
19  
20function MUp(){   
21if(Obj!=''){   
22document.all(Obj).releaseCapture();   
23Obj='';   
24}   
25}   
26</script>

 1<script>   
 2var ms=0;   
 3function did(obj){   
 4ms=obj;   
 5event.srcElement.setCapture();   
 6x=document.all(ms).style.pixelLeft-event.x;   
 7y=document.all(ms).style.pixelTop-event.y;   
 8}   
 9  
10function document.onmousemove(){   
11if(ms){   
12document.all(ms).style.pixelLeft=x+event.x;   
13document.all(ms).style.pixelTop=y+event.y;   
14}   
15}   
16  
17function document.onmouseup(){   
18if(ms){   
19event.srcElement.releaseCapture();   
20ms=0;   
21}   
22}   
23</script>

1<div id="a1" style="position:absolute">
2<div id="a2" onmousedown="did('a1')" style="background-color:#f2f2f2;cursor:move">拖动层</div>
3</div>

 1<script language="javascript">   
 2var IE5=(document.getElementById && document.all)? true : false;   
 3var W3C=(document.getElementById)? true: false;   
 4var currIDb=null, currIDs=null, xoff=0, yoff=0; zctr=0; totz=0;   
 5function trackmouse(evt){   
 6if((currIDb!=null) && (currIDs!=null)){   
 7var x=(IE5)? event.clientX+document.body.scrollLeft : evt.pageX;   
 8var y=(IE5)? event.clientY+document.body.scrollTop : evt.pageY;   
 9currIDb.style.left=x+xoff+'px';   
10currIDs.style.left=x+xoff+10+'px';   
11currIDb.style.top=y+yoff+'px';   
12currIDs.style.top=y+yoff+10+'px';   
13return false;   
14}}   
15  
16function stopdrag(){   
17currIDb=null;   
18currIDs=null;   
19NS6bugfix();   
20}   
21  
22function grab_id(evt){   
23xoff=parseInt(this.IDb.style.left)-((IE5)? event.clientX+document.body.scrollLeft : evt.pageX);   
24yoff=parseInt(this.IDb.style.top)-((IE5)? event.clientY+document.body.scrollTop : evt.pageY);   
25currIDb=this.IDb;   
26currIDs=this.IDs;   
27}   
28  
29function NS6bugfix(){   
30if(!IE5){   
31self.resizeBy(0,1);   
32self.resizeBy(0,-1);   
33}}   
34  
35function incrzindex(){   
36zctr=zctr+2;   
37this.subb.style.zIndex=zctr;   
38this.subs.style.zIndex=zctr-1;   
39}   
40  
41function createPopup(id, title, width, height, x , y , isdraggable, boxcolor, barcolor, shadowcolor, text, textcolor, textptsize, textfamily ){   
42if(W3C){   
43zctr+=2;   
44totz=zctr;   
45var txt='';   
46txt+='<div id="'+id+'_s" style="position:absolute; left:'+(x+10)+'px; top:'+(y+10)+'px; width:'+width+'px; height:'+height+'px; background-color:'+shadowcolor+'; filter:alpha(opacity=50); visibility:visible"> </div>';   
47txt+='<div id="'+id+'_b" style="border:outset '+barcolor+' 2px; position:absolute; left:'+x+'px; top:'+y+'px; width:'+width+'px; overflow:hidden; height:'+height+'px; background-color:'+boxcolor+'; visibility:visible">';   
48txt+='<div style="width:'+width+'px; height:16px; background-color:'+barcolor+'; padding:0px; border:0px;"><table cellpadding="0" cellspacing="0" border="0" width="'+(IE5? width-4 : width)+'"><tr><td width="'+(width-20)+'"><div id="'+id+'_h" style="width:'+(width-20)+'px; height:14px; font: bold 12px sans-serif; color:'+textcolor+'"> '+title+'</div></td><td align="right"><a onmousedown="document.getElementById(\''+id+'_s\').style.display=\'none\'; document.getElementById(\''+id+'_b\').style.display=\'none\';return false"><img src="close.gif" border="0" height="11" width="11"></a></td></tr></table></div>';   
49txt+='<div id="'+id+'_ov" width:'+width+'px; style="margin:2px; color:'+textcolor+'; font:'+textptsize+'pt '+textfamily+';">'+text+'</div></div>';   
50document.write(txt);   
51this.IDh=document.getElementById(id+'_h');   
52this.IDh.IDb=document.getElementById(id+'_b');   
53this.IDh.IDs=document.getElementById(id+'_s');   
54this.IDh.IDb.subs=this.IDh.IDs;   
55this.IDh.IDb.subb=this.IDh.IDb;   
56this.IDh.IDb.IDov=document.getElementById(id+'_ov');   
57if(IE5){   
58this.IDh.IDb.IDov.style.width=width-6;   
59this.IDh.IDb.IDov.style.height=height-22;   
60this.IDh.IDb.IDov.style.scrollbarBaseColor=boxcolor;   
61this.IDh.IDb.IDov.style.overflow="auto";   
62}else{   
63this.IDh.IDs.style.MozOpacity=.5;   
64}   
65this.IDh.IDb.onmousedown=incrzindex;   
66if(isdraggable){   
67this.IDh.onmousedown=grab_id;   
68this.IDh.onmouseup=stopdrag;   
69}}}   
70  
71  
72if(W3C)document.onmousemove=trackmouse;   
73if(!IE5 && W3C)window.onload=NS6bugfix;   
74createPopup( 'box3', '.:CSDN:.' , 300, 150, 50, 155, true, 'de9ede' , '000000' , '840000' , '<table border=1><tr><td>dfsfds</td></tr></table> ', 'FFFFFF' , 9 , 'arial');   
75</script>