当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

如何控制对象拖动

如何控制对象拖动

更新时间:2020-11-25 文章作者:未知 信息来源:网络 阅读次数:


<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null;        //当前拖动对象
var relLeft;        //鼠标按下位置相对对象位置
var relTop;
var zindex=-1;//控制被拖动对象的z-index值
function f_mdown(obj)
{
        currentMoveObj = obj;                //当对象被按下时,记录该对象
        currentMoveObj.style.position = "absolute";
        relLeft = event.x - currentMoveObj.style.pixelLeft;
        relTop = event.y - currentMoveObj.style.pixelTop;
        zindex=currentMoveObj.style.zIndex;//记录原z-index值
        currentMoveObj.style.zIndex=10000;
}
window.document.onmouseup = function()
{      currentMoveObj.style.zIndex=zindex;//恢复
        zindex=-1;        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>

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html