坐标定位及完美拖拽的一些总结

1鼠标坐标与卷轴兼容化： screenX:鼠标在显示屏幕上的坐标。 clientX:鼠标在页面显示区域的坐标。（即如果页面滚动了，以页面显示的左上角作为基准） 各浏览器通用。 pageX：火狐浏览器可用，以整个页面为标准。即PageY=clientY+scrollTop-clientTop 但是这么写肯定是不行的，scrollTop有兼容性问题，于是下面代码： [crayon-50361fa01d349/] [crayon-50361fa01d748/] [crayon-50361fa01db2e/] 300 403 703 ie下弹出300与403，这样利用兼容性写法模拟pageX即可。。（这里默认clientTop为0） 2 top与posTop posTop的数值其实和top是一样的，但区别在于，top固定了元素单位为px，而posTop只是一个数值 因此posTop其实就是避免了类似 elem.style.top=elem1.offsetTop+”px”这类写法 结合两者可以写一个效果，所谓的层跟随卷轴来动 3.scrollHeight 与 offsetHeight 这一段摘自网上，已经测试过了 offsetHeight是自身元素的高度，scrollHeight是 自身元素的高度+隐藏元素的高度。 [crayon-50361fa01df08/] 将依次输出100，250。因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以scrollHeight值为100+150=250。 4位置问题 在网上看到了一个函数 [crayon-50361fa01e2e9/] [crayon-50361fa01e6cf/] [crayon-50361fa01eab8/] [crayon-50361fa01ee9e/] [crayon-50361fa01f28f/] [crayon-50361fa01f676/] [crayon-50361fa01fa5e/] [crayon-50361fa01fe5f/] [crayon-50361fa020259/] [crayon-50361fa020610/] [crayon-50361fa020a00/] getBoundingClientRect(),本来是ie特有的，现在基本所有浏览器都支持了，再不用写恶心的迭代offsetTop了。。。。 附上这个函数返回值的的示意图，含有滚动条情况下的 http://www.css88.com/wp-content/uploads/2009/08/2008100603040663.gif 不过如果单个小东西调试的话用offsetLeft跟offsetTop还是很方便的 5.拖动原理 基本思路 鼠标按下，激活拖拽 onmousedown=function(e){var e = e | window.event; ondrag=true} 鼠标抬起，取消拖拽 onmouseup=function(e){var e [...]