title: Move an SVG element across Divs
body: <p>How do you move an svg in one div, to an svg in another div?</p>
  
  <p>Try to move the red circle to the left.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/6a6da/" rel="nofollow">fiddle</a>.</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;div id="left"&gt;
          &lt;svg id="leftSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;&lt;/svg&gt;
      &lt;/div&gt;
      &lt;div id="right"&gt;
          &lt;svg id="rightSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;&lt;/svg&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Ultimately, a working base proof of concept of the project can be found <a href="http://specialorange.org/sof/" rel="nofollow">here</a> (we are teaching fractions with music), but we are trying to implement the idea of a "factory" where beats are created, and can be dragged onto a measure.  Given that we have many views, we utilize backbone, which uses html templates from _underscore.  </p>
  
  <p>Since we are using cutting edge HTML5 Audio, we are limited to Chrome only, so the Firefox problems shouldn't be an issue.</p>
  
  <p>Any other suggestions? like :</p>
  
  <ul>
  <li>an SVG that covers that page, and has a z-index of 1</li>
  <li>a combination with JQueryUI</li>
  <li>have the SVG follow the drag, and when drop, recreate it in the dropped SVG area?</li>
  </ul>