Copy Code code as follows:
<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.documentelement.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 (oevent) {document.documentelement.onmousemove=null;}
</script>
<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 of all the tags in the document, including all the elements in the Document object;
Event.button value: 0 No key 1 press the left Key 2 press right key 3 press left and right key 4 Press middle Key 5 press left and middle Key 6 press right and middle Key 7 press all keys
This code is improved to mimic window and to cover the Select
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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.documentelement.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 (oevent) {document.documentelement.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>
<body>
<div id= "Odiv" style= "position:absolute;width:100px;height:60px;border:1px solid; 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= "masking 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>
Is this drag div a lot better now? Don't worry about the select. Previously released only in IE normal work, mainly with the parentelement, now I replace it with parentnode, adjust the CSS style, so under the FF can also be normal operation.
