0

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
                                                      jSelectControl.unselect(jFeature);
                                           });

                    jFeature.popup = popup;
                    map.addPopup(popup);

                    $("#JInfo").draggable();

Thanks advance for your helps,

Yasemin

1 Answer 1

3

Check this 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) {
        //console.log('mouseDown');
        this.down = true;
        this.popPnt = this.popup.events.getMousePosition(evt);
        OpenLayers.Event.observe(document, 'mouseup', this.docMouseUpProxy);
        OpenLayers.Event.stop(evt);
    },

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

    mouseOut: function(evt) {
        //console.log('map.mouseOut');
        this.down = false;
        OpenLayers.Event.stop(evt);
    },

    mouseMove: function(evt) {
        //console.log('mouseMove');
        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);
            this.popup.updatePosition();
        }
        OpenLayers.Event.stop(evt);
    },

    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"
});
4
  • Please don't answer with just a link. Add the relevant part in your answers. Sep 23, 2012 at 19:23
  • I think the link is enough here. Have a look at the link. Nov 11, 2013 at 10:43
  • @AamirAfridi It would be sufficient if some code was grabbed from the link and included in the answer.
    – Andrew
    Jun 17, 2014 at 15:50
  • 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
    Jul 1, 2014 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.