提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

利用javascript移动div层-javascript拖动层

JavaScript 利用 移动 div 拖动
2023-06-13 09:14:08 时间
利用javascript移动div层-javascript拖动层:
程序功能:利用javascript开发在界面上随意拖动以下htmlcode中的div层.
javascript移动div层-javascript拖动层代码-
htmlcode:
复制代码代码如下:


<divid="div_Info"style="display:none;dz-index:101;left:175px;width:650px;
position:absolute;top:346px;"align="center">
<tableborder="0"cellpadding="0"cellspacing="0">
<tr>
<%--以下td中添加了javascript代码移动层,拖动层的几个事件
onmousedown事件当鼠标单击时发生
onmousemove事件会在鼠标指针移动时发生
onmouseup事件会在鼠标按键被松开时发生,
onmouseout事件会在鼠标指针移出指定的对象时发生--%>
<tdstyle="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>
<tdstyle="width:22px;background-color:#221B00;font-size:12px;color:#ffffff;
height:22px;"align="center"class="div_table_notLeft_bian">
<ahref="javascript:disponseNone(div_Info)"style="color:White;">x</a></td>
</tr>
<tr>
<tdcolspan="2"style="background-color:#000000"align="center"valign="top"class="div_table_notTop_bian">
<tableborder="0"cellpadding="0"cellspacing="0"style="width:90%">
<tr>
<tdstyle="height:25px;"></td>
</tr>
<tr>
<tdstyle="height:23px;"class="white12px"align="center">
<asp:LabelID="div_lblTitle"runat="server"Font-Size="16px"></asp:Label></td></tr>
<tr><tdstyle="height:15px"valign="top"></td></tr>
<tr><tdid="Div_Td_Content"runat="server"class="white12px"valign="top"></td></tr>
<tr><tdrunat="server"class="white12px"valign="top"style="height:15px"></td></tr>
<tr><tdclass="white12px"style="height:40px"align="center"valign="middle">
<asp:ImageButtonID="ImageButton2"runat="server"ImageUrl="~/images/returns.jpg"
OnClientClick="disponse_div(div_Info);returnfalse;"/></td></tr>
</table>
</td></tr>
</table>
</div>

javascript移动div层-javascript拖动层代码-javascriptcode:
复制代码代码如下:

<scriptlanguage="javascript">
//javascript文件
/*调用方法
//onmousedown="movetianyamessage(div_Info,event)"onmousemove="movetianyamessageend(event);"
//onmouseup="movetianyamessageend(event)"onmouseout="movetianyamessageend(event)"
//onmousedown=鼠标点下的时候onmousemove=鼠标经过的时候onmouseup=鼠标弹起来的时候onmouseout=鼠标离开的时候
*/
vartianyamessage=""
variLayerMaxNum=999;
document.onmouseup=movetianyamessageend;
document.onmousemove=movetianyamessagestart;
vartianyamessagepixefX;
vartianyamessagepixefY;
functionmovetianyamessage(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;
}
elseif(window.captureEvents)
{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
tianyamessagepixefX=event.layerX;
tianyamessagepixefY=event.layerY;
}
document.getElementById(tianyamessage).style.zIndex=iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
}
functionmovetianyamessagestart(evt)
{
if(tianyamessage!=""){
if(document.all)
{
document.getElementById(tianyamessage).style.left=event.x-tianyamessagepixefX;
document.getElementById(tianyamessage).style.top=event.y-tianyamessagepixefY;
}
elseif(window.captureEvents)
{
document.getElementById(tianyamessage).style.left=(evt.clientX-tianyamessagepixefX)+"px";
document.getElementById(tianyamessage).style.top=(evt.clientY-tianyamessagepixefY)+"px";
}
}
}
functionmovetianyamessageend(evt)
{
if(tianyamessage!="")
{
if(document.all)
{
document.getElementById(tianyamessage).releaseCapture();
tianyamessage="";
}
elseif(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
tianyamessage="";
}
}
}
functiondisponse_div(obj)
{
if(obj.style.display=="block")
{
obj.style.display="none";
}
else
{
obj.style.display="block";
}
}
</script>

相关文章