Using JavaScript to move the DIV layer-javascript drag layer _javascript skills

Source: Internet
Author: User
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--%>
&LT;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>
&LT;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>
&LT;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>
&LT;TD style= "height:25px;" ></td>
</tr>
<tr>
&LT;TD style= "height:23px" class= "white12px" align= "Center" >
<asp:label id= "Div_lbltitle" runat= "Server" font-size= "16px" ></asp:Label></td></tr>
&LT;TR&GT;&LT;TD style= "height:15px" valign= "Top" ></td></tr>
&LT;TR&GT;&LT;TD id= "div_td_content" runat= "Server" class= "white12px" valign= "Top" ></td></tr>
&LT;TR&GT;&LT;TD runat= "Server" class= "white12px" valign= "Top" style= "height:15px" ></td></tr>
&LT;TR&GT;&LT;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>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.