拖拽（边界监测）_网页背景

	
		
   
   
		
	
	
	
		
   
   

    
    拖动练习
   
   
	
	<script type="text/javascript">
		function addEventLoad(func){
			var oldonload = window.onload;
			if(typeof window.onload != 'function'){
				window.onload = func;
			}else{
				window.onload = function(){
					oldonload();
					func();
				}
			}
		}
		addEventLoad(function(){
			function c(obj){
				console.log(obj);
			}
			var oBox1 = document.getElementsByClassName('box1')[0];
			var disX = 0;
			var disY = 0;
			oBox1.onmousedown = function(ev){
				var ev = ev || window.event;
				disX = ev.clientX - oBox1.offsetLeft;
				disY = ev.clientY - oBox1.offsetTop;
				oBox1.onmousemove = function(ev){
					var ev = ev || window.event;
					var left = ev.clientX - disX;
					var top = ev.clientY - disY;
					if (left <= 0) {
                        left = 0;
                    }//规定左边界
                    else if (left >= document.documentElement.clientWidth - oBox1.offsetWidth) {
                        left = document.documentElement.clientWidth - oBox1.offsetWidth;
                    }//规定右边界
                    if (top <= 0) {
                        top = 0;
                    }//规定上边界
                    else if (top >= document.documentElement.clientHeight - oBox1.offsetHeight) {
                        top = document.documentElement.clientHeight - oBox1.offsetHeight;
                    }//规定下边界
					oBox1.style.left = left + 'px';
					oBox1.style.top = top + 'px';
				
				}
				document.onmouseup = function(){
					oBox1.onmousemove = null;
					document.onmouseup = null;
				}
				return false;
			}
		})
		
	</script>