地图编辑功能前端实现-优快云博客

本文链接：https://blog.youkuaiyun.com/minedayu/article/details/12961183

最近做的一个东西要求实现一个地图的编辑功能，首先要实现的是前端的地图的可视化编辑，即拖动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 坐标，这个属性比较好用，用来判断鼠标点在一个元素中的哪个位置很方便。

例如：

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {
			x:ev.pageX, 
			y:ev.pageY
		};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

3. HTMLElement 对象的属性
offsetParent() 获得被定位的最近祖先元素，.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先，并构造一个由最近的定位祖先元素包围的 jQuery 对象。.parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

className:规定元素的 class 属性;

innerHTML:规定了 元素所包含的字符串，不包括元素自身的开始标记和结束标记。查询这一属性会将元素的内容 作为一个 HTML 文本串返回。将这个属性设置为一个 HTML 文本串，则可以用 HTML 的解析表示来替换元素的内容。 offsetHeight, offsetWidth:返回 元素的高度和宽度，以像素为单位; offsetLeft:返回 当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。 offsetTop:返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。 offsetParent:返回 对最近的动态定位的包含元素的引用，所有的偏移量都根据该元素来决定。如果元素的 style.display 设置为 none，则该属性返回 null。这是非标准的但却得到很好支持的属性。 scrollHeight, scrollWidth:返回元素的 完整的高度和宽度，以像素为单位。当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 与 offsetWidth 不同， offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。 scrollTop, scrollLeft: 设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。

JS实现拖动（1）