Table拖动的js.html

Table拖动的js.html

< SCRIPT  LANGUAGE ="JavaScript" > ...
<!--
var currentMoveObj = null;    //当前拖动对象
var relLeft;    //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
...{
    currentMoveObj = obj;        //当对象被按下时，记录该对象
    currentMoveObj.style.position = "absolute";
    //alert(event.x);
    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 >