鼠标拖动div标签,动态改变位置

简单来说就是鼠标拖着div在屏幕上走,当然也适用于其他的标签。没什么可说的,比较简单,直接上代码:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>div_mousemove</title>
</head>
<style type="text/css">
	#map{
		width: 200px;
		height: 200px;
		position: absolute;
		border:solid;
	}
</style>
<body>
<div id="map">active Div</div>
<script type="text/javascript">
	var map=document.getElementById('map');
	var isDrop=false
	var disx,disy
	map.onmousedown=function(event){
		disx=event.pageX-map.offsetLeft
		disy=event.pageY-map.offsetTop
		isDrop=true
	}
	window.onmouseup=function(){
		isDrop=false
	}
	window.onmousemove=function(event){
		if(isDrop){
			map.style.left=(event.pageX-disx)+'px'
			map.style.top=(event.pageY-disy)+'px'
		}
	}

</script>
</body>
</html>

鼠标拖动div标签,动态改变位置