<!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; 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...