I'm a little late on this one but I was curious so I gave this a shot. Try this:<!DOCTYPE html>
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
var drag = {};
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
map.addLayer(new esri.layers.GraphicsLayer({ id: 'ctrl_drag' }));
dojo.connect(dijit.byId('map'), 'resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout( function() {
map.resize();
map.reposition();
}, 500);
});
// listen to various events to draw a graphic when the ctrl key is held down
dojo.connect(map, "onMouseDragStart", drag_start);
dojo.connect(map, "onMouseDragEnd", drag_stop);
dojo.connect(map, "onMouseDrag", dragging);
// IE doesn't play nice attaching onkeyup/onkeydown to the window object...
var key_event_handle = dojo.isIE ? dojo.query('body')[0] : window;
dojo.connect(key_event_handle, "onkeydown", function(evt) {
if (evt.ctrlKey || evt.keyCode == 17) {
map.disablePan();
}
});
dojo.connect(key_event_handle, "onkeyup", function(evt) {
if (evt.ctrlKey || evt.keyCode == 17) {
map.enablePan();
}
});
});
}
function drag_start(evt) {
if (evt.ctrlKey) {
map.getLayer('ctrl_drag').clear();
if (check_drag_graphic()) {
delete drag.drag_graphic;
}
drag.start = evt.mapPoint;
}
}
function drag_stop(evt) {
if (evt.ctrlKey) {
drag.stop = evt.mapPoint;
build_rect();
}
}
function dragging(evt) {
if (evt.ctrlKey || evt.keyCode == 17) {
drag.stop = evt.mapPoint;
build_rect();
}
}
function build_rect() {
var xmin = drag.start.x < drag.stop.x ? drag.start.x : drag.stop.x;
var ymin = drag.start.y < drag.stop.y ? drag.start.y : drag.stop.y;
var xmax = drag.start.x > drag.stop.x ? drag.start.x : drag.stop.x;
var ymax = drag.start.y > drag.stop.y ? drag.start.y : drag.stop.y;
var box = new esri.geometry.Extent({
'xmin': xmin, 'ymin': ymin, 'xmax': xmax, 'ymax': ymax, 'spatialReference': map.spatialReference
});
if (check_drag_graphic()) {
map.getLayer('ctrl_drag').graphics[0].setGeometry(box);
} else {
drag.drag_graphic = new esri.Graphic(box, new esri.symbol.SimpleFillSymbol());
map.getLayer('ctrl_drag').add(drag.drag_graphic);
}
}
function check_drag_graphic() {
if (drag.hasOwnProperty('drag_graphic')) {
return true;
} else {
return false;
}
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
</div>
</body>
</html>
