ArcGIS JavaScript Draggable InfoWindow

Note: Draggable popup code for the latest version of the ArcGIS Maps SDK for JavaScript is here

In the ArcGIS API for JavaSctipt v3, the InfoWindow on a web map is the primary method of of showing information on selected items in the map. The map control automatically does its best to show the InfoWindow within the the viewport of the map, but on some maps and in certain situations, it may be appropriate to allow the user to drag the InfoWindow away from the automatically placed location. This is can be done easily 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. For a great user experience, pass the title bar as the “handle” and remove the indicator triangle pointer once user has dragged the InfoWindow:

In what situations have you used a draggable InfoWindow Popup?

See Also

• This Week in Esri GitHub
• Adding D3 to an ArcGIS Web AppBuilder Widget
• The Elusive Draggable Map Popup