<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="div移动">
<title>div移动</title>
</head>
<body>
    <div id="div" style="width:200px; position:absolute; height:200px; background-color:#F90; "></div>			<!-- 做一个div   0.0 -->	
</body>
</html>
<script type="text/javascript">
	var div = document.getElementById('div');
	document.onmousedown = function(e)		//鼠标点击事件
	{
		e = e || window.event;
		var tops = document.getElementById('div').offsetTop;		//div四个角的坐标（200可变动）
		var lefts = document.getElementById('div').offsetLeft;
		var rights = lefts+200;
		var bottoms = tops+200;
		var mousex = e.pageX || e.clientX;			//点击时的鼠标位置
		var mousey = e.pagey || e.clientY;
		var topz = document.getElementById('div').getBoundingClientRect().top;		//获取div的左上位置
		var leftz = document.getElementById('div').getBoundingClientRect().left;
		if((mousex > lefts && mousex < rights)&&(mousey > tops && mousey < bottoms))
		{		//判断鼠标点击时是否在div中
			document.onmousemove = function(e)		//鼠标滑动事件
			{
				var mousexx = e.pageX || e.clientX;			//获取实时鼠标位置
				var mouseyy = e.pagey || e.clientY;
				var xx = mousexx - mousex;					//求移动的距离
				var yy = mouseyy - mousey;
				leftzz = leftz + xx;			
				topzz = topz + yy;
				div.style.left = leftzz +"px";				//对div的左上角进行计算，与鼠标移动的距离相同
				div.style.top = topzz +"px";
			}
		}
	}
	document.onmouseup = function(){		//鼠标抬起将滑动事件解除
		document.onmousemove = null;
	}
</script>