¿Cómo hacer que OpenLayers.Popup se pueda arrastrar?

I've used jquery-ui draggable option as following but the moving popup can not be ended once dragging has started. Is there any another method to make OpenLayers.Popup draggable?

popup = new OpenLayers.Popup.AnchoredBubble(
                                           "JInfo",                                                                // id
                                           jFeature.geometry.getBounds().getCenterLonLat(),  // lonlat
                                           new OpenLayers.Size(ISA.Size.POPUP_WIDTH, ISA.Size.POPUP_HEIGHT),
                                           html,                                           // contentHTML
                                           null,                                              // anchor
                                           true,                                             // closeBox
                                           function() {                                    // closeBoxCallback

                    jFeature.popup = popup;


Thanks advance for your helps,


preguntado el 28 de agosto de 12 a las 12:08

1 Respuestas

Revise este blog post written by me with the solution.

 * Move a popup with a drag.
 * @author Matt Walker
 * @class
OpenLayers.Control.DragPopup = OpenLayers.Class(OpenLayers.Control, {
    down: false,
    popPnt: null,
    mapPnt: null,
    popup: null,
    docMouseUpProxy: null,
     * Constructor: OpenLayers.Control.DragPopup
     * Create a new control to drag a popup.
     * Parameters:
     * @param {OpenLayers.Popup} popup
     * @param {Object} options
    initialize: function(popup, options) {
        OpenLayers.Control.prototype.initialize.apply(this, [options]);
        this.popup = popup;
        this.popup.events.register('mousedown', this, this.mouseDown);
        this.popup.events.register('mouseup', this, this.mouseUp);
        this.popup.events.register('mousemove', this, this.mouseMove);
        // Define a function bound to this used to listen for
        // document mouseout events
        this.docMouseUpProxy = OpenLayers.Function.bind(this.mouseUp, this);

     * Method: setMap
     * Set the map property for the control.
     * Parameters: 
     * map - {<OpenLayers.Map>} The controls map.
    setMap: function(map) {
        OpenLayers.Control.prototype.setMap.apply(this, [map]);
        this.map.events.register('mousemove', this, this.mouseMove);

    mouseDown: function(evt) {
        this.down = true;
        this.popPnt = this.popup.events.getMousePosition(evt);
        OpenLayers.Event.observe(document, 'mouseup', this.docMouseUpProxy);

    mouseUp: function(evt) {
        this.down = false;
        OpenLayers.Event.stopObserving(document, 'mouseup', this.docMouseUpProxy);

    mouseOut: function(evt) {
        this.down = false;

    mouseMove: function(evt) {
        if (this.down) {
            var mapPntPx = this.map.events.getMousePosition(evt);
            mapPntPx = mapPntPx.add((this.popPnt.x*-1), (this.popPnt.y*-1));
            this.popup.lonlat = this.map.getLonLatFromViewPortPx(mapPntPx);

    destroy: function() {
        // Remove listeners
        this.popup.events.unregister('mousedown', this, this.mouseDown);
        this.popup.events.unregister('mouseup', this, this.mouseUp);
        this.popup.events.unregister('mousemove', this, this.mouseMove);
        this.map.events.unregister('mousemove', this, this.mouseMove);
        // Clear object references
        this.popup = null;
        this.popPnt = null;
        // allow our superclass to tidy up
        OpenLayers.Control.prototype.destroy.apply(this, []);

    /** @final @type String */
    CLASS_NAME: "OpenLayers.Control.DragPopup"

Respondido el 18 de junio de 14 a las 15:06

Please don't answer with just a link. Add the relevant part in your answers. - Denys Séguret

I think the link is enough here. Have a look at the link. - Aamir Afridi

@AamirAfridi It would be sufficient if some code was grabbed from the link and included in the answer. - Andrés

I have used this solution for some time now, but it worked with OpenLayers 2.11. I have now updated to OpenLayers 2.13.1 and suddenly, the mouseup event stopped working. This keeps the popup attached to the mouse cursor until refreshing the page. The only other way to get rid of the attached popup is to frantically keep clicking and dragging the map until suddenly the mouseup event is triggered once. I really don't know why it works once while it won't work normally. Could you help me debugging this? - Leonard

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.