前端面试宝典

clientHeight:表示的是可视区域的高度,不包含 border 和滚动条
offsetHeight:表示可视区域的高度,包含了 border 和滚动条
scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分。
clientTop:表示边框 border 的厚度,在未指定的情况下一般为0
scrollTop:滚动后被隐藏的高度,获取对象相对于由 offsetParent 属
性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度。

拖拽功能的实现

首先是三个事件,分别是 mousedown,mousemove,mouseup 当鼠
标点击按下的时候,需要一个 tag 标识此时已经按下,可以执行mousemove 里面的具体方法。
clientX,clientY 标识的是鼠标的坐标,分别标识横坐标和纵坐标, 
并且我们用 offsetX 和 offsetY 来表示元素的初始坐标,
移动的举例应该是:鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为:鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.
还有一点也是原理性的东西, 也就是拖拽的同时是绝对定位,我们改变的是绝对定位条件下的 left 以及 top等等值。

补充:也可以通过 html5 的拖放(Drag 和 drop)来实现