如何使OpenLayers.Popup可拖動？

Question

我已經使用過jquery-ui draggable選項，但是一旦拖動開始，移動的彈出框就不能結束。有沒有其他方法可以使OpenLayers.Popup可拖動？

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(); 

提前感謝您的幫助，

Yasemin與解決方案由我寫的

Answer 1

檢查this博客文章。

/* 
* 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" 
});