JS 拖动原理 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动层效果</title>
</head>

<body>
<div id="tf" style="position:absolute; width:200px; height:150px; background-color:#ccc; top:300px;
   left:300px; z-index:101; border:solid 1px blue;">
    
    <div id="title" style="background-color:blue; cursor:move; height:20px; color:#fff; font-size:13px; padding-top: 5px; padding-left:10px;">
        拖动层TF...
    </div>
    
</div>



<script type="text/javascript">
    tf=document.getElementById("tf"); //获取得tf对象
    var posX; //记录 X
    var posY;// 记录 Y 
    //onmousedown 表示鼠标在按下时发生，记录当前位置
    tf.onmousedown=function(e)
    {
        if(!e)
          e=window.event;
          posX=e.clientX-parseInt(tf.style.left); //自已本身位
          posY=e.clientY-parseInt(tf.style.top);//自已本身位
          
          tf.onmousemove=function(ev)
            {
                if(ev==null)
                 ev=window.event;
                 tf.style.left = (ev.clientX - posX) + "px";
                 tf.style.top = (ev.clientY - posY) + "px";
            }
    }
    
    
    tf.onmouseup=function()
    {  
      //onmouseup 事件会在鼠标按键被松开时发生。
      tf.onmousemove=null;
    }
</script>
</body>
</html>
View Code

 

拖动层效果

拖动层TF...
posted @ 2013-09-22 14:42  KyrieYang  阅读(281)  评论(0)  编辑  收藏  举报