属性
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}