取鼠标与控件的位置

<script>
    var canmove=false;
 var leftX=0,topY=0,newX=0,newY=0;
        function showpx(){
           var obj=document.getElementById("tbl1");
           var objp=obj.offsetParent
           alert("Top:" + obj.offsetTop + "Left:" +obj.offsetLeft + "px" + objp.offsetTop + "py" +

objp.offsetLeft );       
        }

 function moveAble(){
  if(event.srcElement.id=="moveArea")
     canmove=true;
              leftX=(event.clientX+document.body.scrollLeft)-wizard.style.pixelLeft;
     topY=(event.clientY+document.body.scrollTop)-wizard.style.pixelTop;
     //wizard.style.pixelLeft = wizard.offsetLeft;
            //wizard.style.pixelTop = wizard.offsetTop;
                   //event.clientX,event.clientY:分别表示当前事件的鼠标在屏幕浏览区的位置
                   //wizard.style.pixelLeft,wizard.style.pixelTop: 表示指定元素的XY点的值
                   //wizard.offsetLeft | wizard.offsetLeft与
                   //  wizard.style.pixelLeft | wizard.style.pixelTop的值相同,应该在一些场合下是不同的?
                   //注意大小写,
 }
 function moveDisable(){
    canmove=false;
 }
 function move(){
    if(canmove){
     newX = (event.clientX + document.body.scrollLeft);
         newY = (event.clientY + document.body.scrollTop);
     wizard.style.pixelLeft=newX-leftX;
     wizard.style.pixelTop=newY-topY;
     event.returnValue = false;
    }
 }
 document.onmousedown=moveAble;
 document.onmouseup=moveDisable;
 document.onmousemove=move;
 window.onresize=showpx;

  </script>
  <table id="wizard" cellspacing="0" style="position:absolute;left:300;top:150;background:#EEEEEE;border:1 solid

#CCCCCC">
     <tr bgcolor="black" id="moveArea">
   <td align="right"  id="moveArea">
     <font color='white'>最新消息</font>
   </td>
   <td align="right" id="moveArea">
     <a href="#" onclick="wizard.style.display='none'"><font color='white'>[关闭]</font></a>
   </td>
      </tr>
 <tr>
   <td>
     <img src='../images/girl_s.gif'>
   </td>
   <td valign="top"><br><br>
     <a href='../news/MessView.net?IDMessage=11147'><b><font

color='red'>10月23日WINDOWS主机升级通知!</font></b><br>[2004-10-21]</a><br><a

href='../news/MessView.net?IDMessage=11060'><b><font

color='red'>CN代理价格再一次下调，低至行业之最！</font></b><br>[2004-10-18]</a><br><a

href='../news/MessView.net?IDMessage=11059'><b><font

color='red'>行业惊暴，买国家顶级CN域名送国际域名！</font></b><br>[2004-10-18]</a><br>   </td>
 </tr>
   </table>
&nbsp;&nbsp;&nbsp;
<table width='100%'>
<tr>
  <td width='20%'>
<table id=tbl2><tr><td>test1</td></tr></table>
  </td>
  <td width='20%'>
<table id=tbl1><tr><td>test2</td></tr></table>
  </td>
  <td width='20%'>
<table id=tbl3><tr><td>test3</td></tr></table>
  </td>
</tr>
</table>

本文地址：http://com.8s8s.com/it/it34505.htm