event 事件div块的拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}

		</style>
		<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var disX = 0;
			var disY = 0;
			oDiv.onmousedown = function(ev)
			{
				var oEvent = ev||event;
				
				disX = oEvent.clientX - oDiv.offsetLeft;
				disY = oEvent.clientY - oDiv.offsetTop;
				
				document.onmousemove = function(ev){//document.onmousemove可避免鼠标移动的块位置问题
					var oEvent = ev || event;
					
					oDiv.style.left = oEvent.clientX - disX +"px";
					oDiv.style.top = oEvent.clientY - disY +"px";
				};
				
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;
				}
				
			}
		}
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

　　完整版禁止上下左右出界

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}

		</style>
		<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var disX = 0;
			var disY = 0;
			oDiv.onmousedown = function(ev)
			{
				var oEvent = ev||event;
				
				disX = oEvent.clientX - oDiv.offsetLeft;
				disY = oEvent.clientY - oDiv.offsetTop;
				
				document.onmousemove = function(ev){
					var oEvent = ev || event;
					var l = oEvent.clientX - disX; //块的x位置
					var t = oEvent.clientY - disY;//块的y位置
					
					if(l<0)
					{
						l = 0;
					}else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
					{
						l = document.documentElement.clientWidth - oDiv.offsetWidth;
					}
					if(t <0)
					{
						t = 0;
					}else if(t>document.documentElement.clientHeight - oDiv.offsetHeight)
					{
						t = document.documentElement.clientHeight - oDiv.offsetHeight;
					}
					oDiv.style.left =l +"px";
					oDiv.style.top = t +"px";
				};
				
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;
				}
			　　　　return false;//阻止火狐bug ff下拖拽空div会出现重影	
			}
		}
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

　　带虚线框的拖拽块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 0;
			}
			.box{
				border: 1px dashed black;
				position: absolute;
			}
		</style>
		<script>
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var disX = 0;
			var disY = 0;
			oDiv.onmousedown = function(ev)
			{
				var oEvent = ev||event;
				
				disX = oEvent.clientX - oDiv.offsetLeft;
				disY = oEvent.clientY - oDiv.offsetTop;
				
				//鼠标按下创建一个box 给上className虚线框 
				//虚线框的宽度就是 oDIv块的宽度
				var oBox = document.createElement("box");
				oBox.className = "box";
				oBox.style.width = oDiv.offsetWidth + "px";
				oBox.style.height  = oDiv.offsetHeight +"px";

//当鼠标按下的时候虚线框的位置没变所以要改变虚线框的位置
oBox.style.left = oDiv.offsetLeft +"px";
oBox.style.top = oDiv.offsetTop +"px";

				
				document.body.appendChild(oBox);
			
				
				document.onmousemove = function(ev){
					var oEvent = ev || event;
					var l = oEvent.clientX - disX; //块的x位置
					var t = oEvent.clientY - disY;//块的y位置
					
					if(l<0)
					{
						l = 0;
					}else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
					{
						l = document.documentElement.clientWidth - oDiv.offsetWidth;
					}
					if(t <0)
					{
						t = 0;
					}else if(t>document.documentElement.clientHeight - oDiv.offsetHeight)
					{
						t = document.documentElement.clientHeight - oDiv.offsetHeight;
					}
					oBox.style.left =l +"px";
					oBox.style.top = t +"px";
					
				};
				
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;
					
					//oDiv的left top 等于 oBox的左边距
					oDiv.style.left = oBox.offsetLeft +"px";
					oDiv.style.top = oBox.offsetTop +"px";
					
//					鼠标离开清除虚线框
					document.body.removeChild(oBox);
				}
	
				return false;//阻止火狐bug ff下拖拽空div会出现重影
			}
		}
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>