鼠标拖动表格，表格层，表格美化（系列四）

最新推荐文章于 2022-03-06 18:30:09 发布

limon758

最新推荐文章于 2022-03-06 18:30:09 发布

阅读量98

点赞数

分类专栏： javaScript 文章标签： F# JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/heisetoufa/article/details/83265595

版权

javaScript 专栏收录该内容

163 篇文章 0 订阅

订阅专栏

效果图：可以用鼠标拖动两个框到页面的任意位置

代码：

<html>

<head>
<meta http-equiv="Content-Type" content="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="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
    <TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
    <TD align="center" height="60">content</TD>
</TR>
</TABLE>
</body>

</html>

黑色头发 http://heisetoufa.iteye.com

limon758

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖动表格，表格层，表格美化（系列四）

效果图：可以用鼠标拖动两个框到页面的任意位置代码：&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt;&lt;title&gt;可以用鼠标拖动的表格&lt;/title&gt;&lt;/head&gt;&amp
复制链接

扫一扫

专栏目录