title: D3 Triggering drag during mousedown
body: <p>Is there a way to click anywhere in an svg and have an element snap to that location and simultaneously begin dragging?</p>
  
  <p>The closest I've gotten is in the code below. Dragging the circle works and clicking elsewhere will make the circle move to that location, but I can't figure out how to start the drag without releasing the mouse and directly clicking the circle.</p>
  
  <p>More generally, how can I start the drag behavior without directly interacting with the element being dragged?</p>
  
  <p><a href="http://jsfiddle.net/Hj44M/1/" rel="nofollow">http://jsfiddle.net/Hj44M/1/</a></p>
  
  <pre><code>var width = 200,
      height = 200,
      radius = 10;
  
  var drag = d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("dragstart", function(){
          d3.event.sourceEvent.stopPropagation()
      })
      .on("drag", dragmove);
  
  var svg = d3.select("body")
      .data([{x: 100, y : 100}])
      .append('svg')
      .attr("height", 200)
      .attr("widht", 200)
      .on("mousedown", function(){
          circle.each(dragmove)
      });
  
  
  var circle = svg.append("circle")
      .attr("r", radius)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .call(drag);
  
  function dragmove(d) {
      d3.select(this)
      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
  }
  </code></pre>