用javascript实现对div的拖拽功能的实现过程

来源：互联网发布：知乎如何绑定邮箱编辑：程序博客网时间：2024/05/20 20:45

 
 <body>
  <div id="drag" class="drag"></div>
  <script type="text/javascript">
 var isDown =false;
 var doc = document.documentElement || document.body,
  dragDiv = document.getElementById("drag");
 doc.onmousemove = function(e){
  if(isDown){
   e = e || window.event || Event;
   dragDiv.style.left = e.pageX;
   dragDiv.style.top = e.pageY;
  }//这里存在兼容性问题，ie无法识别，但是总的来说还是已经迈出了一大步。
 }
 doc.onmouseup = function(){
  isDown = false;
 }
 
 var drag = document.getElementById("drag");
  drag.onmousedown = function(){
   isDown = true;
  }
  </script>
 </body>

上面页面是网络上一位仁兄给予的结果，同我的写法相比我必须说的是，我很惭愧，看来还是没有理解到JavaScript的精髓啊，给e.pageX 和e.pageY  改成 e.offsetX 和e.offsetY；，在开始的时候我的写法是这样的：


<html>
 <head>
  <title> New Document </title>
 <style type="text/css">
  body{margin:0}
 .drag{width:40px;height:40px;background:#123321;position:relative}
 </style>
 </head>
 <body>
  <div id="drag" class="drag" onmousedown="move(event)" onmousemove="upmove(event)" onmouseup="stopdrag(event)"></div>
  <script type="text/javascript">
   var x,y,cx,cy;
   var down=false;
 function move(event){
  var even=event?event:window.event;
  var drag=document.getElementById("drag");
  x=drag.offsetLeft;
  y=drag.offsetTop;
  cx=even.clientX;
  cy=even.clientY;
  down=true;
 }
 var cx1,cy1;
 function upmove(event){
  var even=event?event:window.event;
  var drag=document.getElementById("drag");
  if(down){
   cx1=even.clientX-cx;
   cy1=even.clientY-cy;
   drag.style.left=cx1+"px";
   drag.style.top=cy1+"px";
  }
 }
 function stopdrag(event){
   var even=event?event:window.event;
   var drag=document.getElementById("drag");
     down=false;
  drag.id="drag";
     drag.style.left=cx1+"px";
     drag.style.top=cy1+"px";
  }
  </script>
 </body>
</html>
 
颜色加深的部分是最大的问题，问题原因是在每次结束后会cx1,cy1第二次拖拽会归零。后来一位仁兄给我提供了关于通过日子寻找问题的方法：
最大的改进是添加一个判断：
 问题表面上得到了解决，但是新的问题出现了：类似onmouseover事件的情况，如div会出现在onmouseup事件发生后鼠标移动到div上，div不需点击仍可以随箭头运动。 
不过还是要感谢所有帮助我解决这个问题的同行们。