js div拖拽实现兼容ie/firefox js之鼠标位置深入解析
在前端web开发中，不可避免地会应用到对某个对象的拖拽操作，尤其经常是一个div层。对页面对象的位置移动操作，难点就在如何准确的获取鼠标位置，本文就对鼠标位置做一些分析对比，最后完成一个对div的拖拽操作。
| 名称 | 解释 |
| clientX | 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 |
| clientY | 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 |
| screenX | 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。 |
| screenY | 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。 |
| offsetX | 事件发生的地点在事件源元素的坐标系统中的 x 坐标(ie)。 |
| offsetY | 事件发生的地点在事件源元素的坐标系统中的 y 坐标(ie)。 |
| x | 事件发生的位置的 x 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageX)。 |
| y | 事件发生的位置的 y 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageY)。 |
| pageX | 鼠标指针的位置，相对于文档的左边缘(firefox,~x)。 |
| pageY | 鼠标指针的位置，相对于文档的上边缘(firefox,~y)。 |
| layerX | 鼠标相比较于当前坐标系的位置(firefox,~offsetX)。 |
| layerY | 鼠标相比较于当前坐标系的位置(firefox,~offsetY)。 |
1、clientX/clientY：
这两个属性分别返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的水平、垂直坐标，如图：
2、screenX/screenY：
返回事件发生时鼠标指针相对于屏幕的水平、垂直坐标，如图：
3、offsetX/offsetY：
这两个属性是IE浏览器特有的，指发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。注意，这里不再是针对整个浏览器或整个屏幕了，而是对于发生事件的对象而言，下面的图例以红色区域作为事件源来展现offsetX、offsetY相对于红色区域左上角的位置坐标：
4、x、y：
这两个属性也是IE特有的，指事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素，也即相对于目标事件的父元素的外边界在xy坐标上的位置。相当于firefox中的pageX、pageY坐标。当事件源的父对象为document时，x和y与clientX、clientY相同。
当目标源的父级不是浏览器窗口时，xy的值将不同于clientX和clientY：
5、layerX/layerY：
鼠标相比较于当前坐标系的位置，该属性是firefox中支持的，相似于IE中的offsetX和offsetY。
6、pageX/pageY：
鼠标指针的位置，相对于文档的左边缘和上边缘，是firefox中支持的，相似于ie中的x和y。
6、可拖拽div
根据上面的分析，我们来做一个可拖拽的div，先分析下移动div原理：
如图，如果设鼠标位置1点坐标为(x0,y0)，鼠标位置2点为(x1,y1)，B点为(x,y)，鼠标距离在红色区域的位置为：(left,top)，那么：
x = (x0-left) + (x1-x0)=x1-left，y=(y0-top) + (y1-y0)=y1-top.
即B点坐标为(x1-left,y1-top)。
结合鼠标事件，整体思路为：
- 当鼠标按下时，记录当前的left、top值，如果是ie，即为(offsetX,offsetY)，如果是firefox，即为(layerX,layerY)。同时设置可移动标识为true。
- 当鼠标移动时，如果可移动标识为false，则直接返回，否则获得当前的x,y值，如果是ie，即为(x,y)，如果是firefox，即为(pageX,pageY)，并设置当前的div坐标为上面B点的坐标值。
- 当鼠标松开时，设置可移动标记为false。
下面是本文所有截图实现的源代码，供参考：
js脚本：
页面：
名称 解释 值 clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。 screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。 offsetX 事件发生的地点在事件源元素的坐标系统中的 x 坐标(ie) offsetY 事件发生的地点在事件源元素的坐标系统中的 y 坐标(ie) x 事件发生的位置的 x 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageX)。 y 事件发生的位置的 y 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageY)。 layerX 鼠标相比较于当前坐标系的位置(firefox,~offsetX) layerY 鼠标相比较于当前坐标系的位置(firefox,~offsetY) pageX 鼠标指针的位置，相对于文档的左边缘(firefox,~x)。 pageY 鼠标指针的位置，相对于文档的上边缘(firefox,~y)。
测试区
点击获得全部代码