精确定位 以及js实现拖动
下文中的所有event都指的是跨浏览器的event对象，即DOM事件的event，IE事件为window.event.
事件的各种坐标
1. clientX clientY
event.clientX;
event.clientY;
鼠标相对于浏览器窗口可视区域的水平，垂直距离。（可视区域不包括工具栏和滚动条）
注：如果鼠标不动，滚动滚轮，再次点击，值不变
2. pageX pageY
event.pageX;
event.pageY;
页面坐标，相对于文档的坐标，左上角为(0,0)，左、上为负，右、下为正，
注：pageX=clientX+scrollLeft pageY=clientY+scrollTop
也就是说： pageX 和 pageY获取的是相对文档高度，可以理解为距body最左上角的位值
3. screenX , screenY
event.screenX;
event.screenY;
相对于屏幕的坐标，包括浏览器工具栏，包括工具栏上方的任何其他内容
4. offsetX offsetY
event.screenX;
event.screenY;
鼠标光标相对于目标元素边界的水平和垂直坐标(如果不存在任何容器，例如它是window上的监听事件，那么它和e.pageX , e.pageY是等效的。)
2、元素大小
DOM中没有规定如何确定页面中元素的大小，IE引入了一些属性，所以width和height是基于IE盒模型，即外盒大小=内容+margin
元素的可见大小由其高度/宽度决定，包括所有内边距，滚动条，和边框大小。
1. 偏移量 offset dimension
element.offsetHeight：元素在垂直方向上占用的空间大小，包括元素高度（内容+padding+border）和可见的水平滚动条的高度
element.offsetWidth：元素在水平方向上占用的空间大小，包括元素宽度（内容+padding+border）和可见的垂直滚动条的高度
element.offsetLeft：元素的左外边框距离其包含元素的左内边框的像素距离
element.offsetTop：元素的上外边框距离其包含元素的上内边框见的像素距离
offsetParent： 距离最近的拥有大小的祖先节点
下面代码将算出某个元素在页面上的偏移量，思路是将该元素的offsetLeft和offsetTop与其offsetParent的对应元素相加，一直循环至根节点，就可以得到一个基本准确的值：
function getElementOffset(element) {
var offset = {
acturalLeft: element.offsetLeft,
acturalTop: element.offsetTop
}
var current = element.offsetParent;
while(current != null) {
offset.acturalLeft += current.offsetLeft;
offset.acturalTop += current.offsetTop;
current = current.offsetParent;//让current等于其offsetParent，继续循环，直到current=null，即循环到了根元素，结束循环
}
return offset;
}
注意：
所有上述偏移量都是只读的，并且每次访问它们都需要重新计算，因此，应该避免重复访问这些属性；如果要重复使用它们，可以将其保存在局部变量中，提高性能！
2、客户区大小 clientWidth和clientHeight
客户区大小指的是元素内容及其内边距所占据的大小。不包括滚动条
element.clientWidth;// = 内容+左右内边距
element.clientHeight;//= 内容+上下内边距
3、滚动大小 scroll dimension
滚动大小指的是包含滚动内容的元素的大小
element.scrollHeight;//没有滚动条的情况下，元素内容的总高度
element.scrollWidth;//没有滚动条的情况下，元素内容的总宽度
element.scrollLeft;//被隐藏在内容区域左侧的像素数
element.scrollTop;//被隐藏在内容区上方的像素数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
div{width: 300px; height: 40px; border: 5px solid cadetblue; background: orange; position: absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
var oCl=document.getElementById('cl');
var disx=0;//用来装鼠标在拖动元素中的相对x轴位置
var disy=0;//用来装鼠标在拖动元素中的相对y轴位置
oCl.onmousedown=function(ev){//鼠标按下时换获取坐标
var oEvent=ev || event;//Event的兼容性处理
disx=oEvent.clientX-oCl.offsetLeft;//求出鼠标在拖动元素中的相对x轴位置
disy=oEvent.clientY-oCl.offsetTop;//求出鼠标在拖动元素中的相对y轴位置
document.onmousemove=function(ev){//鼠标移动时赋给元素坐标
var oEvent=ev || event;
var left=oEvent.clientX-disx;//鼠标当时的x坐标减鼠标在拖动元素中的相对x轴的值
var top=oEvent.clientY-disy;//<鼠标当时的y坐标减去鼠标在拖动元素中的相对y轴的值
if(left<0){
left=0;//防止移出屏幕左侧外
}
else if(left>document.documentElement.clientWidth-oCl.offsetWidth){
left=document.documentElement.clientWidth-oCl.offsetWidth;//防止移出屏幕右侧外
}
if(top<0){
top=0;//防止移出上方
}
else if(top>document.documentElement.clientHeight-oCl.offsetHeight){
top=document.documentElement.clientHeight-oCl.offsetHeight;//防止移出下方
}
oCl.style.left=left+'px';
oCl.style.top=top+'px';//赋值
}
};
document.onmouseup=function(){
document.onmousemove=null;//防止鼠标移动过快脱出元素范围而无法继续控制
}
}
</script>
</head>
<body>
<div id="cl"></div>
</body>
</html>
上一篇： 第7章 函数表达式
下一篇： iOS 调用系统原生的定位