JS 拖动原理

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>
拖动层效果
拖动层TF...
相关文章
