nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Encuentra más publicaciones etiquetadas con

Accepted answers

YueWu1

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.

All comments

MikeVolz

This would be very useful.

YueWu1

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

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.