I'm trying to get a popup window that identifies a location to be moveable. My code is similar to the API example:

var popupOptions = {
    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 0, 0]), 2),
                new dojo.Color([255, 255, 0, 0.25]))

var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

map = new esri.Map("map", {
    extent: initExtent

I can't seem to find anywhere that will allow me to make that popup infowindow moveable (was thinking of trying to implement dojo.dnd.moveable).

I've tried, unsucessfully:

function makeMoveable(node){
    var dnd = new dojo.dnd.Moveable(dojo.byId(node));

Anyone have a suggestion?

  • 2
    If I were you I wouldn't use dijit's made by ESRI. I work a lot with esri JS api and I've found lots of bugs in those. And IMO those modules are not very configurable.
    – Krystian
    Commented Feb 26, 2013 at 13:57
  • 1
    I previously thought about doing something similar, but making the popup moveable is only part of the problem - the window points to the location it references using one of these images: serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/dijit/… Unless you want to get into a rather sticky problem you will have to live with the popup no longer pointing to the correct location
    – tomfumb
    Commented Feb 26, 2013 at 17:27

3 Answers 3


This blog has an excellent example of how to make the window draggable and hide the arrow using dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow

Here's the key javascript snippet:

], function (
) {
    var webMapItemID = "fe0827dfea2441f5b206b0e2c37b79cd";
    arcgisUtils.createMap(webMapItemID, "map", {}).then(function(response) {
        var map = response.map;
        var handle = query(".title", map.infoWindow.domNode)[0];
        var dnd = new Moveable(map.infoWindow.domNode, {
            handle: handle

        // when the infoWindow is moved, hide the arrow:
        on(dnd, 'FirstMove', function() {
            // hide pointer and outerpointer (used depending on where the pointer is shown)
            var arrowNode =  query(".outerPointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");

            var arrowNode =  query(".pointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");

Add a div with id identifyDiv to your html code and change you javascript to be

var popup = new esri.dijit.Popup({popupOptions}, "identifyDiv");

map = new esri.Map("map", {
    extent: initExtent


Based on comments to my question, I decided to not make this box moveable and keep the close icon for the users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.