<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" οnmοusedοwn="move(event)" οnmοusemοve="upmove(event)" οnmοuseup="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不需点击仍可以随箭头运动。不过还是要感谢所有帮助我解决这个问题的同行们。