javascript拖拽

属性

offsetWidth:返回元素的宽度,包括边框和填充,但不是边距
offsetHeight:返回元素的高度,包括边框和填充,但不是边距
offsetLeft:返回当前元素左边界到它上级元素的左边界的距离,只读属性
offsetTop:返回当前元素上边界到它上级元素的上边界的距离,只读属性
clientWidth:在页面上返回内容的可视宽度(不包括边框,边距,或滚动条)
clientHeight:在页面上返回内容的可视高度(不包括边框,边距,或滚动条)

拖拽案例

     	#box{width: 100px;height: 100px;background: red;position: absolute;cursor: move;}
<div id="box">  </div>
var box =document.getElementById("box");
		box.function(e){//鼠标按下事件
			var oEvent =e||event;//解决鼠标点击位置兼容性
		//鼠标到浏览器的距离-盒子左边上边到浏览器的距离=鼠标到盒子边距的距离(鼠标点击盒子的位置)
			var x =oEvent.clientX-box.offsetLeft;
			var y =oEvent.clientY-box.offsetTop;
			document.function(e){//鼠标移动事件
				var oEvent=e||event;
				//鼠标到浏览器位置-x(鼠标点击盒子的距离)=盒子到浏览器的距离
				var left=oEvent.clientX-x;
				var top=oEvent.clientY-y;
				//得出盒子在页面中的最大宽和高,不能让盒子跑出当前页
				//可视宽度-盒子宽度=最大宽
				//可视高度-盒子高度=最大高
				var maxW=document.documentElement.clientWidth-box.offsetWidth;
				var maxH=document.documentElement.clientHeight-box.offsetHeight;
				//判断盒子是否超出边界
				if(left<0){left=0;} 
				if(top<0){top=0;}
				if(left>maxW){left=maxW;}
				if(top>maxH){top=maxH;}
				box.style.left=left+"px";
				box.style.top=top+"px";
			}
		}
		//鼠标按键松开事件
		box.function(){document.null}