拖拽

思路：计算好边界值
注意事项：切记代码不要多写、少写甚至写错

div的拖拽
div在鼠标按下时跟随鼠标走
div变化的是left和top属性⭐⭐⭐
div要定位
鼠标按下:onmousedown
在哪按下：div上按下
鼠标移动:onmousemmove,
在哪移动:在文档上document
鼠标抬起:onmouseup
抬起做什么事?移除移动事件onmousemmove
样式css

	<style type="text/css">            
		div{                
			width: 300px;                
			height: 250px;                
			background: red;                
			position: absolute;            
		}        
	</style>

样式 div正常样式
javascript事件调用

	<script type="text/javascript">                                
	//三个事件：            
		//onmousedown，onmousemmove，onmouseup        
	var div = document.querySelector("div");        
	div.onmousedown = function(eve){//按下事件                
		//鼠标按着不放            
		var e = eve || event;            
		//点击元素边框内侧            
		var x = e.offsetX;   //获取未按动之前的x            
		var y = e.offsetY;   //获取未按动之前的y            
		//文档上document移动            
		document.onmousemove = function(eve){//eve代表有一个onmousemove事件对象                
			var e = eve || event;                
			//边框+内容+margin+padding                
			var l = e.pageX - x;   //var x = e.offsetX;                
			var t = e.pageY - y;    //var y = e.offsetY;  
			                              
			//边界处理                
			//var maxL = window.innerWidth                
			var maxL = document.documentElement.clientWidth - 300;                
			var maxT = document.documentElement.clientHeight - 250;                
			//l如果小于0，l=0                
			//t如果小于0  t=0;                
			/*if(l < 0){                    
				l = 0;                
			}else if(l >= maxL){                    
				l = maxL;                
			}                
			if(t < 0){                    
				t = 0;                
			}else if(t >= maxT){                    
				t = maxT;                
			}*/
			//简写成三目运算                                
			l = l < 0 ? 0 : (l >= maxL ? maxL : l);                
			t = t < 0 ? 0 : (t >= maxT ? maxT : t);
			                                                
			//改变div的left和top               
			div.style.left = l + "px";                
			div.style.top = t + "px";
			                                
			return false;//阻止默认文字选中行为⭐⭐⭐ 选中文字松开鼠标仍默认选中                           
		}            
		//抬起   把移动清除            
		div.onmouseup = function(){                
			document.onmousemove = null;//清除掉            
		}        
	}                                                
</script>