js移动div

来源:互联网 发布:绘声绘影软件中文版 编辑:程序博客网 时间:2024/05/16 07:12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE>js移动div</TITLE> </HEAD> <BODY>  <div style="border:1px solid green;width:500px;height:100;left:100px;top:100px;position: absolute;">   <div id='pop-editor' style='width: 100px;height:30px;border:1px solid red;position: absolute;left:10px;top:20px;' onmousedown='down(event)' onmouseup='up()'>move</div></div>   </BODY></HTML><SCRIPT LANGUAGE="JavaScript">  var posX;   var posY;   var popDiv;   var dragable;  var divClone;  function down(e){       popDiv = document.getElementById("pop-editor");  divClone = popDiv.parentNode;    e = e || window.event; //如果是IE        posX = e.clientX - parseInt(divClone.style.left);          posY = e.clientY - parseInt(divClone.style.top);       dragable = true;       document.onmousemove = move;   }   function move(ev){       if(dragable == true){           ev = ev || window.event;//如果是IE           divClone.style.left = (ev.clientX - posX) + "px";              divClone.style.top = (ev.clientY - posY) + "px";          }   }     function up(){       dragable = false;   }    </SCRIPT>


 

原创粉丝点击