Board logo

标题: 鼠标拖动div随意移动 [打印本页]
作者: fangzhen    时间: 2008-11-14 13:29     标题: 鼠标拖动div随意移动

<html>
<head>
<script>
function move_div( obj )
{
this.div_obj = obj;
this.offsetX = 0;
this.offsetY = 0;

this.div_mousemove = function()
{
var e = window.event;
if( e.button != 1 )
return false;

var top = e.clientY;
var left = e.clientX;

this.div_obj.style.left = left - this.offsetX;
this.div_obj.style.top = top - this.offsetY;
}

this.div_mousedown = function()
{
var e = window.event;
this.offsetY = e.clientY - parseInt(this.div_obj.style.top);
this.offsetX = e.clientX - parseInt(this.div_obj.style.left);
}
}

</script>
<style type="text/css">
<!--
.div3 {background-color: #F1F6FA; border: 2px solid #8BC0EB; display:none;}
.div4 {background-color: #F1F6FA; border: 2px solid #8BC0EB; display:inherit;}
-->
</style>
</head>
<body>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" onClick="java scriptayer1.className='div4'" style="CURSOR:hand">登录小提示</td>
</tr>
</table>
<div id="Layer1" style="position:absolute; left:600px; top:250px; width:250px; height:100px; z-index:1;" class="div3">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" background="<%=request.getContextPath() %>/index/images/OpenDiv_titlebg.gif" onMousedown="infoRmove.div_mousedown();return false;" onMouseMove="infoRmove.div_mousemove();return false;">
<img src="<%=request.getContextPath() %>/index/images/OpenDiv_titleclose.gif" border="0" onClick="java scriptayer1.className='div3'" style="CURSOR:hand">
</td>
</tr>
<tr>
<td>
<font class="font">
?教师
</font>
</td>
</tr>
</table>
</div>
<script>
var infoRmove = new move_div(Layer1);
</script>
</body>



欢迎光临 PHP开发笔记 (http://phpvi.com/) Powered by Discuz! 6.1.0