how to make a Custom Overlays draggable using goog

Question

the marker can drag , so the Custom Overlays can drag too ,

so how to make the Custom Overlays draggable ,

thanks

Answer 1

If you are using a custom "OverlayView" I found that adding your draggable objects the "overlayMouseTarget" pane will allow you to capture mouse events on that object and for example use jQuery UI to and apply draggable() to an object.

Answer 2

I recently put together a solution on a similar thread that applies greatly to this question as well:

Here is the other Stack Overflow Thread Showing how to create a custom overlay in V3 with a draggable object

Here is the working example: http://www.johnmick.net/drag-div-v3/

Here is some of the source: http://www.johnmick.net/drag-div-v3/js/main.js

To make the Custom Overlay itself draggable, using jQuery UI, you would just make the div object of the overlay draggable like:

    CustomOverlay.prototype.onAdd = function()
    {
        var div = document.createElement("DIV");
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";
        div.style.visibility = "visible";
        jQuery(div).draggable();   //Make the overlay itself draggable
        this.div = div;
        this.addPolygon(new google.maps.LatLng(46,0));
        this.getPanes().overlayLayer.appendChild(div);
    };