Copy codeThe Code is as follows:
<Html> <Title> test movable div </title>
<Script language = 'javascript 'Type = 'text/javascript '>
Var offset_x;
Var offset_y;
Function Milan_StartMove (oEvent)
{
Var whichButton;
If (document. all & oEvent. button = 1) whichButton = true;
Else {if (oEvent. button = 0) whichButton = true ;}
If (whichButton)
{
Var oDiv = document. getElementById ("oDiv ");
Offset_x = parseInt (oEvent. clientX-oDiv.offsetLeft );
Offset_y = parseInt (oEvent. clientY-oDiv.offsetTop );
Document.doc umentElement. onmousemove = function (mEvent)
{
Var eEvent;
If (document. all) eEvent = event;
Else {eEvent = mEvent ;}
Var oDiv = document. getElementById ("oDiv ");
Var x = eEvent. clientX-offset_x;
Var y = eEvent. clientY-offset_y;
ODiv. style. left = (x) + "px ";
ODiv. style. top = (y) + "px ";
}
}
}
Function milan_stopmove(oevent1_document.doc umentElement. onmousemove = null ;}
</Script>
</Head>
<Body>
<Div id = "oDiv" onmousedown = "Milan_StartMove (event)" onmouseup = "Milan_StopMove (event )"
Style = "cursor: move; position: absolute; width: 100px; height: 60px; border: 1px solid
Silver; left: 100px; top: 100px; z-index: 9999; "> </div>
</Body>
Document. all [] is an array variable consisting of all tags in the document, including all elements in the document object;
Event. value of the button: 0 No keys; 1 left click; 2 right click; 3 right click; 4 middle key; 5 left and middle key; 6 Right and middle key; 7 all keys
The following code is improved to simulate the window and make it cover the select
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> test movable div </title>
<Script language = 'javascript 'Type = 'text/javascript '>
Var offset_x;
Var offset_y;
Function Milan_StartMove (oEvent, div_id)
{
Var whichButton;
If (document. all & oEvent. button = 1) whichButton = true;
Else {if (oEvent. button = 0) whichButton = true ;}
If (whichButton)
{
Var oDiv = div_id;
Offset_x = parseInt (oEvent. clientX-oDiv.offsetLeft );
Offset_y = parseInt (oEvent. clientY-oDiv.offsetTop );
Document.doc umentElement. onmousemove = function (mEvent)
{
Var eEvent;
If (document. all) eEvent = event;
Else {eEvent = mEvent ;}
Var oDiv = div_id;
Var x = eEvent. clientX-offset_x;
Var y = eEvent. clientY-offset_y;
ODiv. style. left = (x) + "px ";
ODiv. style. top = (y) + "px ";
Var d_oDiv = document. getElementById ("disable _" + oDiv. id );
D_oDiv.style.left = (x) + "px ";
D_oDiv.style.top = (y) + "px ";
}
}
}
Function milan_stopmove(oevent1_document.doc umentElement. onmousemove = null ;}
Function div_Close (o)
{Var oDiv = o; oDiv. style. display = "none"; var d_oDiv = document. getElementById ("disable _" + o. id); d_oDiv.style.display = "none ";}
</Script>
</Head>
<Body>
<Div id = "oDiv" style = "position: absolute; width: 100px; height: 60px; border: 1px solid silver; left: 100px; top: 100px; z-index: 9999; ">
<Div id = "move" onmousedown = "Milan_StartMove (event, this. parentNode)" onmouseup = "Milan_StopMove (event )"
Style = "cursor: move; width: 100%; height: 15px; background-color: # 0066cc; font-size: 10px;">
<Div onclick = "div_Close (this. parentNode. parentNode) "style =" float: right; width: 10px; height: 100%; cursor: hand; background-color: # cc3333; color: White; font-size: 15px; "> X </div>
</Div>
<Span> test </span>
</Div>
<Div id = "disable_oDiv" style = "position: absolute; left: 100px; top: 100px; width: 100px; height: 60px; z-index: 9998; FILTER: alpha (opacity = 50); ";>
<Iframe src = "about: blank "name =" hiddenIframe "width =" 100% "frameborder =" 0 "height =" 60px "title =" covering layer "> </iframe> </div>
<Select name = "ListHead1 $ DropDownList3" id = "ListHead1_DropDownList3">
<Option selected = "selected" value = ""> </option>
<Option value = "2"> 3333 </option>
<Option value = "6"> 1111 </option>
<Option value = "B"> 222 </option>
</Select>
</Body>
</Html>
Is it better to drag the div now? You don't have to worry about the select statement. Previously, it can only work normally in IE, mainly using parentElement. Now I change it to parentNode and adjust the CSS style so that it can run normally in FF.