本代码实现简单的层的拖动
javascript代码
/**
功能：拖动对象，并置当前对象为最高层
作者：feifengxlq《许立强》feifengxlq@hotmail.com
时间: 2006-10-24
演示：
*/
var move_obj_x0=0,move_obj_y0=0,move_obj_x1=0,move_obj_y1=0;//(x0,y0)为开始拖动时鼠标的位置(x1,y1)为开始拖动时对象的位置
var obj_moveable=false;
//开始拖动;
function startDrag(obj,id)
{
if(event.button==1)
{
obj.setCapture();
win=document.getElementById(id)
move_obj_x0 = event.clientX;
move_obj_y0 = event.clientY;
move_obj_x1 = parseInt(win.style.left);
move_obj_y1 = parseInt(win.style.top);
obj_moveable = true;
}
}
//拖动;
function drag(id)
{
if(obj_moveable)
{
win=document.getElementById(id)
win.style.left = (move_obj_x1 + event.clientX - move_obj_x0>0)?move_obj_x1 + event.clientX - move_obj_x0:0;
win.style.top = (move_obj_y1 + event.clientY - move_obj_y0>0)?move_obj_y1 + event.clientY - move_obj_y0:0;
}
}
//停止拖动;
function stopDrag(obj,id)
{
if(obj_moveable)
{
obj.releaseCapture();
obj_moveable = false;
}
}
演示代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script language="javascript" src="../src/js/move.js"></script>
</head>
<body>
<div id="move_test" style="position:absolute">
<table width="300" border="1" cellspacing="0" cellpadding="0" onmousedown="startDrag(this,'move_test')" onmouseup="stopDrag(this,'move_test')" onmousemove="drag('move_test')">
<tr>
<td height="30"><div align="center">标题</div></td>
</tr>
</table>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="100"><div align="center"><a href="http://www.phpobject.net">http://www.phpobject.net</a></div></td>
</tr>
</table>
</div>
</body>
</html>
