Is it possible to make the infowindow/pop up window draggable

[AzizaParveen2]

Dear Geonet Users,

We have several GIS apps built using JavaScript API where our users want to drag  infowindow / pop up window to their desired location on map. Is it possible to that with JavaScript API? I will appreciate your thoughts and ideas on this.

Thanks

[MichaelVolz]

This would be very useful.

[YueWu1 · Accepted solution]

Hi Aziza,

Please check this sample that shows how to make the infoWindow draggable.

This is can be done with the dojo/dnd/Moveable module.

dojo/dnd/Moveable simply takes a DOM Node reference. To make the InfoWindow of the map draggable, pass map.infoWindow.domNode to the Moveable constructor.

[AzizaParveen2]

Thanks so much Yue for your reply. I could not get into the sample link.

I will try the dojo/dnd/Moveable module.

[YueWu1]

Try it again it should work now

[AzizaParveen2]

Nice exactly what I wanted, can't wait to try , Thank you so much Yue

[AzizaParveen2]

Finally, I was able to try your example, worked like a charm, Thanks a ton for help:)

[JeffJacobson]

I made a few minor improvements / modifications to your sample.

• Updated to ArcGIS API v3.14.
• Replaced some dojo-specific methods (query and css class manipulation) with browser built-in equivalents.
• Removed reference to "dojo/on" module. Replaced with Moveable.on().
• Modified CSS to remove use of !important.
• Removed duplicate variable declaration.

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
    width: 100%;
    margin: 0px;
}

.esriPopupWrapper .title {
    cursor: move;
}
.esriPopup .pointer.hidden {
    display: none;
}

require([
    'esri/arcgis/utils',
    'dojo/dnd/Moveable'
], function (
    arcgisUtils,
    
    Moveable
) {
    var webMapItemID = "fe0827dfea2441f5b206b0e2c37b79cd";
    arcgisUtils.createMap(webMapItemID, "map", {}).then(function(response) {
        var map = response.map;
        var handle = map.infoWindow.domNode.querySelector(".title"); //query(".title", map.infoWindow.domNode)[0];
        var dnd = new Moveable(map.infoWindow.domNode, {
            handle: handle
        });
        
        // when the infoWindow is moved, hide the arrow:
        dnd.on('FirstMove', function() {
            // hide pointer and outerpointer (used depending on where the pointer is shown)
            var arrowNode =  map.infoWindow.domNode.querySelector(".outerPointer");
            arrowNode.classList.add("hidden");
            
            arrowNode =  map.infoWindow.domNode.querySelector(".pointer");
            arrowNode.classList.add("hidden");
        }.bind(this));
    });
});

[AzizaParveen2]

Thanks so much Jeff.