title: How to start SVG Dragging from it's original position
body: <p>I have the code below for dragging svg object.</p>
  
  <pre><code>$('#svg-drag')
     .draggable()
     .bind('mousedown', function(event, ui){
      // bring target to front
      $(event.target.parentElement).append( event.target );
     })
     .bind('drag', function(event, ui){
      // update coordinates manually, since top/left style props don't work on SVG
      event.target.setAttribute('x', ui.position.left);
      event.target.setAttribute('y', ui.position.top);
  </code></pre>
  
  <p>});</p>
  
  <p>but when I start dragging the object, it always start from the corner. with the  0, 0 xy coordinates. I want to start dragging from its original coordinates. If I have 100, 300 xy coordinate, I want to start dragging from 100 x coordinate and 300 y coordinate. </p>
  
  <p>Thanks in advance!!</p>