使OpenLayers的popup可拖动

当前OpenLayers的版本已经到了2.8。但是功能还不尽完善，比如我要用到的拖动Marker和Popup的功能还没有实现。幸好Popup.js中预留有拖动事件的方法，结合网页拖动代码，勉强实现了拖动功能。改动Popup.js的代码如下：

 

/** * Method: onmousedown * When mouse goes down within the popup, make a note of * it locally, and then do not propagate the mousedown * (but do so safely so that user can select text inside) * * Parameters: * evt - {Event} */ onmousedown: function (evt) { this.mousedown = true; //add for drag. ev = evt; ev = ev || window.event; /*var mousePos = myTool.mouseCoords(ev); var thisDivPx = myTool.getPosition( this.div ); mouseOffset = new OpenLayers.Pixel( mousePos.x - thisDivPx.x, mousePos.y -thisDivPx.y) ;*/ this.mouseOffset = myTool.getMouseOffset(this.div, ev); OpenLayers.Event.stop(evt, true); }, //add for drag. mouseOffset: null, /** * Method: onmousemove * If the drag was started within the popup, then * do not propagate the mousemove (but do so safely * so that user can select text inside) * * Parameters: * evt - {Event} */ onmousemove: function (evt) { if (this.mousedown) { ev = evt; ev = ev || window.event; var mousePos = myTool.mouseCoords(ev); var map_OpenLayers_Container = document.getElementById("map_OpenLayers_Container"); var Container = myTool.getPosition(map_OpenLayers_Container); var px = new OpenLayers.Pixel( mousePos.x - Container.x - this.mouseOffset.x, mousePos.y - Container.y -this.mouseOffset.y ); this.moveTo(px); OpenLayers.Event.stop(evt, true); } }, /** * Method: onmouseup * When mouse comes up within the popup, after going down * in it, reset the flag, and then (once again) do not * propagate the event, but do so safely so that user can * select text inside * * Parameters: * evt - {Event} */ onmouseup: function (evt) { this.onmousemove = false; if (this.mousedown) { this.mousedown = false; OpenLayers.Event.stop(evt, true); } },

其中用到了以下工具代码

//add for drag the popup. myTool = {}; myTool.mouseCoords = function(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 }; } /** * get mouse offset from the target * @param {Object} target * @param {Object} ev */ myTool.getMouseOffset = function(target, ev){ ev = ev || window.event; var docPos = myTool.getPosition(target); var mousePos = myTool.mouseCoords(ev); return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y }; } /** * Get the postion on the page. * @param {Object} e */ myTool.getPosition = function (e){ var left = 0; var top = 0; while (e.offsetParent) { left += e.offsetLeft; top += e.offsetTop; e = e.offsetParent; } left += e.offsetLeft; top += e.offsetTop; return { x: left, y: top }; }

 

将以上代码插入到Popup.js中后，所有的Popup都可以拖动了。

但是这种实现方式具有以下缺点：

1. 改动了OpenLayers的源代码，拖动的实现没有很好的利用Openlayers中的拖动类

2. 所有的Popup都可以拖动

3. 不能拖动到右边界