topic Is it possible to make the infowindow/pop up window draggable in ArcGIS JavaScript Maps SDK Questions

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

AzizaParveen2 — Tue, 22 Sep 2015 16:34:25 GMT

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

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

MichaelVolz — Tue, 22 Sep 2015 16:35:42 GMT

This would be very useful.

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

YueWu1 — Tue, 22 Sep 2015 18:41:23 GMT

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.

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

AzizaParveen2 — Tue, 22 Sep 2015 18:47:25 GMT

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

I will try the dojo/dnd/Moveable module.

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

YueWu1 — Tue, 22 Sep 2015 18:49:31 GMT

Try it again it should work now

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

AzizaParveen2 — Tue, 22 Sep 2015 18:57:26 GMT

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

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

JeffJacobson — Sat, 11 Dec 2021 12:32:26 GMT

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

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

AzizaParveen2 — Wed, 30 Sep 2015 21:40:25 GMT

Thanks so much Jeff.

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

AzizaParveen2 — Thu, 19 Nov 2015 21:26:11 GMT

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