Use JavaScript to move the DIV layer-javascript drag layer:
Program function: Use JavaScript development in the interface of arbitrary drag the following HTML code in the div layer.
JavaScript Move div layer-javascript drag layer code-
HTML code:
Copy Code code as follows:
<div id= "Div_info" style= "display:none; dz-index:101; left:175px; width:650px;
Position:absolute; top:346px "align=" Center ">
<table border= "0" cellpadding= "0" cellspacing= "0" >
<tr>
<%--The following TD added JavaScript code move layer, drag layer of several events
OnMouseDown event occurs when mouse clicks
The OnMouseMove event occurs when the mouse pointer moves
The OnMouseUp event occurs when the mouse button is released.
The onmouseout event occurs when the mouse pointer moves out of the specified object--%>
<TD style= "WIDTH:628PX; height:22px; Background-color: #3f3200; "class=" Div_table_bian "
Onmousedown= "Movetianyamessage (Div_info, event)" Onmousemove= "Movetianyamessageend (event);"
onmouseup= "Movetianyamessageend (event)" onmouseout= "Movetianyamessageend (event)" >
</td>
<TD style= "WIDTH:22PX; Background-color: #221B00; font-size:12px; Color: #ffffff;
height:22px "align=" center "class=" Div_table_notleft_bian ">
<a href= "Javascript:disponsenone (div_info)" style= "Color:white"; >x</a></td>
</tr>
<tr>
<TD colspan= "2" style= "Background-color: #000000" align= "center" valign= "Top" class= "Div_table_nottop_bian" >
<table border= "0" cellpadding= "0" cellspacing= "0" style= "width:90%" >
<tr>
<TD style= "height:25px;" ></td>
</tr>
<tr>
<TD style= "height:23px" class= "white12px" align= "Center" >
<asp:label id= "Div_lbltitle" runat= "Server" font-size= "16px" ></asp:Label></td></tr>
<TR><TD style= "height:15px" valign= "Top" ></td></tr>
<TR><TD id= "div_td_content" runat= "Server" class= "white12px" valign= "Top" ></td></tr>
<TR><TD runat= "Server" class= "white12px" valign= "Top" style= "height:15px" ></td></tr>
<TR><TD class= "white12px" style= "height:40px" align= "center" valign= "Middle" >
<asp:imagebutton id= "ImageButton2" runat= "Server" imageurl= "~/images/returns.jpg"
onclientclick= "Disponse_div (Div_info); return false;"/></td></tr>
</table>
</td></tr>
</table>
</div>
JavaScript Move div layer-javascript Drag layer code-javascript:
Copy Code code as follows:
<script language= "JavaScript" >
JavaScript files
/* Call method
Onmousedown= "Movetianyamessage (Div_info, event)" Onmousemove= "Movetianyamessageend (event);"
onmouseup= "Movetianyamessageend (event)" onmouseout= "Movetianyamessageend (event)"
onmousedown= Mouse when onmousemove= mouse over the time when onmouseup= mouse bouncing up when onmouseout= mouse left
*/
var tianyamessage = '
var ilayermaxnum = 999;
Document.onmouseup = Movetianyamessageend;
Document.onmousemove = Movetianyamessagestart;
var Tianyamessagepixefx;
var tianyamessagepixefy;
function Movetianyamessage (Object, event)
{
Tianyamessage = object.id;
if (document.all)
{
document.getElementById (tianyamessage). SetCapture ();
Tianyamessagepixefx = Event.x-document.getelementbyid (tianyamessage). Style.pixelleft;
Tianyamessagepixefy = Event.y-document.getelementbyid (tianyamessage). Style.pixeltop;
}
else if (window.captureevents)
{
Window.captureevents (event.mousemove| Event.mouseup);
Tianyamessagepixefx = Event.layerx;
Tianyamessagepixefy = Event.layery;
}
document.getElementById (tianyamessage). Style.zindex = Ilayermaxnum;
Ilayermaxnum = Ilayermaxnum + 1;
}
function Movetianyamessagestart (EVT)
{
if (tianyamessage!= ') {
if (document.all)
{
document.getElementById (tianyamessage). Style.left = Event.x-tianyamessagepixefx;
document.getElementById (tianyamessage). Style.top = Event.y-tianyamessagepixefy;
}
else if (window.captureevents)
{
document.getElementById (tianyamessage). Style.left = (Evt.clientx-tianyamessagepixefx) + "px";
document.getElementById (tianyamessage). Style.top = (evt.clienty-tianyamessagepixefy) + "px";
}
}
}
function Movetianyamessageend (EVT)
{
if (tianyamessage!= ')
{
if (document.all)
{
document.getElementById (tianyamessage). ReleaseCapture ();
Tianyamessage= ';
}
else if (window.captureevents) {
Window.captureevents (event.mousemove| Event.mouseup);
Tianyamessage= ';
}
}
}
function Disponse_div (obj)
{
if (obj.style.display== "block")
{
Obj.style.display= "None";
}
Else
{
obj.style.display= "Block";
}
}
</script>