ctrl-drag

JohnCartwright — Wed, 01 Dec 2010 18:22:11 GMT

Hello All,

Is it possible to use the ctrl-drag for my own purposes (e.g. drawing a rectangle)?

I realize the drag, shift-drag and shift-ctrl-drag are already spoken for but I'd like use the mouse-down and mouse-up positions in conjunction w/ a check for the control modifier key.

Any help or pointers would be greatly appreciated!

--john

Re: ctrl-drag

JasonMiller1 — Fri, 03 Dec 2010 14:44:13 GMT

You can check to see if the ctrl key is held down using js. Here's an example:

http://www.java2s.com/Tutorial/JavaScript/0300__Event/Iscontrolkeypressedduringthemouseclick.htm

It looks like dojo also has built-in ways of checking the ctrl key. I've never used them, but perhaps these examples might help you out:

http://o.dojotoolkit.org/forum/dojo-core-dojo-0-9/dojo-core-support/dojo-keys-combination

or line 124 here:
http://bugs.dojotoolkit.org/browser/dijit/trunk/tests/tree/robot/Tree_selector.html?rev=23016

Hope that helps you out some.

J

Re: ctrl-drag

derekswingley1 — Sat, 11 Dec 2021 20:01:40 GMT

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>

topic Re: ctrl-drag in ArcGIS JavaScript Maps SDK Questions

ctrl-drag

Re: ctrl-drag

Re: ctrl-drag