<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0px;
margin:0px;
}
#box{
width:100px;
height:100px;
background-color: fuchsia;
position: absolute;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
drag(box);
};
function drag(obj){
//按下鼠标的时候进行操作
obj.onmousedown=function(event){
event=event||window.event;
//修正鼠标在div中位置
var currentX=event.clientX-obj.offsetLeft;
var currentY=event.clientY-obj.offsetTop;
//修正水平，垂直偏移量scroll
var sX;
var sY;
//鼠标位置
var clientY;
var clientX;
//在整个文档中移动
//判断有没有这个对象
if(obj.setCapture)
obj.setCapture()
document.onmousemove=function(event){
event=event||window.event;
//修正水平，垂直偏移量scroll
sX=document.body.scrollLeft;
sY=document.body.scrollTop;
//改变div的位置
clientY=event.clientY;
clientX=event.clientX;
obj.style.top=clientY-currentY+sY+"px";
obj.style.left=clientX-currentX+sX+"px";
//停止拖动事件：onmouseup
document.onmouseup=function(){
if(obj.releaseCapture)
obj.releaseCapture();
//取消move
document.onmousemove=null;
//取消掉自己
document.onmouseup=null;
};
};
//取消拖拽之后可能会被搜索的可能，之前的setCapture也是这样的
return false;
};
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
鼠标在div的相对位置：
var currentX=event.clientX-obj.offsetLeft;
var currentY=event.clientY-obj.offsetTop;
停止拖拽：
在document.onmousemove中添加一个onmousedup事件
取消onmousemove和它自己
防止被浏览器误搜索
其他浏览器：在函数的末尾加上return false;
IE8以及之下的浏览器
setCapture,releaseCapture.
照常先对这个方法进行判断，看他是否存在。（存在就是IE浏览器，不存在就是其他浏览器）
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
