title: JQuery & SVG drag and drop
body: <p>Been banging my head against a wall for a couple of days now and getting nowhere, so I just want to find some sort of confirmation that what I'm trying to do is actually do'able....</p>
  
  <p>I have a page with a SVG witin a DIV. I want to be able to click on a component of the SVG and drag it around. Simple really in theory.
  I had this in a messy raw javascript version, but am trying to do it in JQuery for consistency.</p>
  
  <p>I had the following, wich drags the entire container DIV around:</p>
  
  <p>*
      var svgName = "/mySvg.svg";</p>
  
  <pre><code>$(document).ready(function($) {
      $('#svgDiv').svg();
      var svg = $('#svgDiv').svg('get');
      svg.load(svgName,
  
      function () {
          $('#svgDiv').draggable().bind('mousedown', function(event, ui) {
              $(event.target.parentElement).append( event.target );
          }).bind('drag', function(event, ui) {
              event.target.setAttribute("transform", "translate("+event.clientX+","+event.clientY+")");
          });
      });
  });
  </code></pre>
  
  <p>*</p>
  
  <p>I changed it this this, which I thought would get an element of the SVG by it's ID, but this does nothing. It's as if the JQuery can't see 'inside' (want of a better word) the DIV.
  *</p>
  
  <pre><code>var svgSource = "/mySvg.svg";
  
  $(document).ready(function($) {
      $('#svgDiv').svg();
      var svgObj = $('#svgDiv').svg('get');
      svgObj.load(svgSource,
          function () {
              var svgObj2 = $('#svgDiv').svg('get');
              var svgElem = svgObj2.getElementById('pathIdOne');
              $(svgElem).draggable().bind('mousedown', function(event, ui) {
                  $(event.target.parentElement).append( event.target );
              }).bind('drag', function(event, ui) {
                  //event.target.setAttribute("transform", "translate("+event.clientX+","+event.clientY+")");
                  event.target.setAttribute('x', ui.position.left);
                  event.target.setAttribute('y', ui.position.top);                    
              });
          });
  });
  </code></pre>
  
  <p>*</p>
  
  <p>Can anyone see anything glaringly obvious that needs changing, can this be done, or is this just completely wrong?</p>