页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

写的一段拖动对象的代码

发布：dxy 发布日期：2007-1-10 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<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" onmousedown="f_mdown(this)" onmousemove="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" onmousedown="f_mdown(this)" onmousemove="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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：写的一段拖动对象的代码

百度中搜索更多的关于写的一段拖动对象的代码内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

文章评论

共有位脚本之家网友发表了评论我来说两句

写的一段拖动对象的代码

文章评论

同类文章

最近更新

热点排行

写的一段拖动对象的代码

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行