JS实现表格拖动的代码_层和布局特效

JS实现的表格拖动的实例代码，类似于层拖动，按住鼠标不放就可以拖动相应的表格，这里仅是一个示例，表格可能并不美观，你可以继续美化一下。

<html>

<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>鼠标拖动表格</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null;    
var relLeft;    
var relTop;
function f_mdown(obj)
{
    currentMoveObj = obj;
    currentMoveObj.style.position = "absolute";
    relLeft = event.x - currentMoveObj.style.pixelLeft;
    relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
    currentMoveObj = null;
}
function f_move(obj)
{
    if(currentMoveObj != null)
    {
        currentMoveObj.style.pixelLeft=event.x-relLeft;
        currentMoveObj.style.pixelTop=event.y-relTop;
    }
}

//-->
</SCRIPT>
<BODY>
<TABLE width="290" border=1 onselectstart="return false" style="position:absolute;left:80;top:70" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
    <TD bgcolor="#F8F8F8" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
    <TD align="center" height="60">mrc</TD>
</TR>
</TABLE>
<TABLE width="260" border=1 onselectstart="return false" style="position:absolute;left:330;top:260" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
    <TD bgcolor="#F8F8F8" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
    <TD align="center" height="60">mrc</TD>
</TR>
</TABLE>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-14

[收藏][报错][返回列表]

JS实现表格拖动的代码_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些