<SCRIPT type = "text/JavaScript">
/* Analysis: the entire process is divided into three steps: getting objects, moving objects, and releasing objects.
The three steps correspond to the mouse events: onmousedown, onmousemove, onmouseup
*/
VaR X, Y, Z, down = false, OBJ;
Function Init (){
OBJ = event. srcelement; // gets the focus object
OBJ. setcapture (); // sets the Mouse capture
Z = obj. style. zindex; // obtain the original Z axis position
OBJ. style. zindex = 100; // set it to the top layer.
X = event. offsetx; // obtain the X position of the mouse pointer relative to the object that triggers the event
Y = event. offsety; // obtain the Y position of the mouse pointer relative to the object that triggers the event
Down = true; // set the mouse status to press
}
Function move (){
If (down & event. srcelement = OBJ ){
With (obj. Style ){
Posleft = Document. Body. scrollleft + event. X-X;
Postop = Document. Body. scrolltop + event. Y-Y;
}
}
}
Function up (){
Down = false;
OBJ. style. zindex = z;
OBJ. releasecapture ();
}
</SCRIPT>
</Head>
<Div id = "1" onmousedown = "Init ()" onmousemove = "move ()" onmouseup = "Up ()" style = "position: absolute; top: 100px; left: 100px;
Width: 100px; Height: 150px; Border: 1px solid # CCC; Background: red; Z-index: 1 "> div1 </div>
<Div id = "2" onmousedown = "Init ()" onmousemove = "move ()" onmouseup = "Up ()" style = "position: absolute; top: 150px; left: 150px;
Width: 100px; Height: 150px; Border: 1px solid #666; Background: Blue; Z-index: 2 "> div2 </div>
<Div id = "3" onmousedown = "Init ()" onmousemove = "move ()" onmouseup = "Up ()" style = "position: absolute; top: 200px; left: 200px;
Width: 100px; Height: 150px; Border: 1px solid #999; Background: green; Z-index: 3; "> div3 </div>