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