现在Web页面的交互方式越来越多样化,其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决,一个是事件的注册方式,一般处理拖放元素的事件顺序是:捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件;另一个问题就是拖放元素的位置,即X/Y坐标。这里我主要来讲述后面的问题:如何获取一个Dom元素的坐标。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法,我们可以直接使用,而这里我更多的是希望透过这些方法,看到原始的获取坐标方式以及如何处理跨浏览器问题。
首先认识一下getBoundingClientRect方法,标准语法为:
oRect = object.getBoundingClientRect();
Dom节点调用该方法可返回一个ClientRect类型的对象,该对象有四个属性值:top、left、right、bottom,表示了该节点相对于可视浏览器可视区域的左上角位置的坐标,看图就能好理解:


