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

来源：互联网发布：软件服务费合同模板编辑：程序博客网时间：2024/05/16 10:44

<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第二次拖拽会归零。后来一位仁兄给我提供了关于通过日子寻找问题的方法：
最大的改进是添加一个判断：

用javascript实现对div的拖拽功能的实现过程 - js前端 - Java系语言从业者

问题表面上得到了解决，但是新的问题出现了：类似onmouseover事件的情况，如div会出现在onmouseup事件发生后鼠标移动到div上，div不需点击仍可以随箭头运动。

0 0