最近做的一个东西要求实现一个地图的编辑功能，首先要实现的是前端的地图的可视化编辑，即拖动POI、商店等等的图标到地图上，然后获取并且保存位置等等各项信息并且与后台进行交互等等。要用JS实现拖动的功能并不难，首先先需要准备一些JS的基础知识。

1.target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

event.target

对于target,Chrome、Firefox等使用的是event.target,而奇葩IE则用的是event.srcElement，所以一般会写为var target = ev.target || ev.srcElement;

2.pageX、screenX、clientX的区别：

因为这三者看起来差不多的，所以在一开始使用的时候可能会有些犹豫。其实三者的概念还是有些差别的，就像margin和padding一样，而且不同的浏览器所支持的也不尽相同，所以有时会略囧。

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角,无争议O(∩_∩)O。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动，无争议；

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动，有点像absolute，它的值小于或等于相同状态下的clientX；不过pageX只有Fireforks有，奇葩的IE是不存在的，所以在pageX的基础上，还会增加一句：PageY=clientY+scrollTop-clientTop;(X轴同理)，即页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度,scrollTop代表的是被浏览器滑动条滚过的长度;

offsetX,Y:奇葩的IE不仅不支持其他人的，还搞了自己的，发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标，这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便。

例如：