title: Unable to drag in d3
body: <p>I have the following D3 code, but I'm unable to drag the rect element successfully. (please ignore bad indentation) I'm unable to understand what I'm doing wrong here. </p>
  
  <pre><code>var svg = d3.select('#slider').append('svg')
      .attr('width', width)
      .attr('height', height);
  
  
  var drag = d3.behavior.drag()
      .origin(function (d) {
          return d;
      })
      .on("dragstart", dragstarted)
      .on("drag", dragged);
  
  //Called when drag event starts. It stop the propagation of the click event
  function dragstarted(d) {
      d3.event.sourceEvent.stopPropagation();
  }
  
  //Called when the drag event occurs (object should be moved)
  function dragged(d) {
      d.x = d3.event.x;
      d.y = d3.event.y;
      //Translate the object on the actual moved point
      d3.select(this).attr({
          transform: "translate(" + d.x + "," + d.y + ")"
      });
  };
  
  svg.append('rect')
      .attr('width', 500)
      .attr('height', 250)
      .attr('x', 10)
      .attr('y', 50)
      .attr('fill', "transparent")
      .attr('stroke', "orange")
      .attr('stroke-width', 2)
      .append("title")
      .text(function (d) {
          return "Zone 1";
      })
      .call(drag);
  </code></pre>