Esri JS API Draggable Popups

by Alex Azuero

HTML

<link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css">
<script type="text/javascript">
    var dojoConfig = {
        async: true
    };
</script>
<script src="//js.arcgis.com/3.13/"></script>
<div id="map"></div>

CSS

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

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

JavaScript

require([
    'esri/arcgis/utils',
    'dojo/dnd/Moveable',
    'dojo/query',
    'dojo/on',
    'dojo/dom-class'
], function (
    arcgisUtils,
    
    Moveable,
    query,
    on,
    domClass
) {
    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");
        }.bind(this));
    });
});