title: spawn & drag of SVG elements - approach
body: <p>I am on my learning curve for Javascript/SVG combo (animating and making interactive SVGs).</p>
  
  <p>I wanted to create a code snippet where menu elements ("inventory") can be dragged over to the main screen ("canvas") while the originating element would remain in its place (as if one would move a copy of it off the original element).</p>
  
  <p>Here I crafted the code snippet as best as I could:
  <a href="http://codepen.io/cmer41k/pen/f2b5eea274cdde29b0b2dc8a2424a645" rel="nofollow">http://codepen.io/cmer41k/pen/f2b5eea274cdde29b0b2dc8a2424a645</a></p>
  
  <p>So I sort of managed to do something but its buggy:</p>
  
  <ol>
  <li><p>I could deal with 1 copy and making it draggable, but then I don't know how to deal with IDs for all those spawning elements, which causes dragging issues </p></li>
  <li><p>I fail to understand how to make it work indefinitely (so that it can spawn any amount of circles draggable to canvas)</p></li>
  <li><p>Draggable elements in canvas often overlap and I fail to attach the listeners the way they don't overlap so that the listener on the element I am dragging would propagate "through" whatever other elements there;(</p></li>
  </ol>
  
  <p><strong>Question is basically - can someone suggest logic that I should put into this snippet so that it was not as cumbersome. I am pretty sure I am missing something here;( (e.g. it should not be that hard is it not?)</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;svg id="svg"
    height="800"
    width="480"
      viewbox="0 0 480 800"
      preserveAspectRatio="xMinYMin meet"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
  &gt;
      &lt;rect id="canvasBackground" width="480" height="480" x="0" y="0"/&gt;
      &lt;rect id="inventoryBackground" width="480" height="100" x="0" y="480"/&gt;
  
  
  &lt;g id="inventory"&gt;
  &lt;path id="curve4" class="inventory" d="M60,530 A35,35 0 1,1 60,531" /&gt;
  &lt;path id="curve3" class="inventory" d="M150,530 A35,35 0 1,1 150,531" /&gt;
  &lt;path id="curve2" class="inventory" d="M240,530 A35,35 0 1,1 240,531" /&gt;
  &lt;path id="curve1" class="inventory" d="M330,530 A35,35 0 1,1 330,531" /&gt;
  &lt;/g&gt;
  
  &lt;g id="canvas"&gt;
  &lt;/g&gt;
  
  &lt;/svg&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>// define meta objects
  var drag = null;
  
  // this stores all "curves"-circles
  var curves = {};
  var canvas = {};
  var inventory = {};
  
  window.onload = function() {
  
          // creates the curve-circles in the object and at their initial x,y coords
          curves.curve1 = document.getElementById("curve1");
          curves.curve1.x = 0;
          curves.curve1.y = 0;
          curves.curve2 = document.getElementById("curve2");
          curves.curve2.x = 0;
          curves.curve2.y = 0;
          curves.curve3 = document.getElementById("curve3");
          curves.curve3.x = 0;
          curves.curve3.y = 0;
          curves.curve4 = document.getElementById("curve4");
          curves.curve4.x = 0;
          curves.curve4.y = 0;
          canvas = document.getElementById("canvas");
          inventory = document.getElementById("inventory");
  
          // attach events listeners
  
          AttachListeners();
  }
  
  function AttachListeners() {
      var ttt = document.getElementsByClassName('inventory'), i;
      for (i = 0; i &lt; ttt.length; i++) {
      document.getElementsByClassName("inventory")[i].onmousedown=Drag;
      document.getElementsByClassName("inventory")[i].onmousemove=Drag;
      document.getElementsByClassName("inventory")[i].onmouseup=Drag;
      }
  }
  
  // Drag function that needs to be modified;//
  function Drag(e) {
          e.stopPropagation();
          var t = e.target, id = t.id, et = e.type;  m = MousePos(e);
  
              if (!drag &amp;&amp; (et == "mousedown")) {
  
                  if (t.className.baseVal=="inventory") { //if its inventory class item, this should get cloned into draggable?
                      copy = t.cloneNode(true);
                      copy.onmousedown=copy.onmousemove=onmouseup=Drag;
                      inventory.insertBefore(copy, inventory.firstChild);
                      drag = t;
                      dPoint = m;
                  } 
                  if (t.className.baseVal=="draggable")   { //if its just draggable class - it can be dragged around
                      drag = t;
                      dPoint = m;
                  }
  
              }
          // drag the spawned/copied draggable element now
              if (drag &amp;&amp; (et == "mousemove")) {
                  curves[id].x += m.x - dPoint.x;
                  curves[id].y += m.y - dPoint.y;
                  dPoint = m;
                  curves[id].setAttribute("transform", "translate(" +curves[id].x+","+curves[id].y+")");  
              }
  
          // stop drag
              if (drag &amp;&amp; (et == "mouseup")) {
                  t.className.baseVal="draggable";
                  drag = null;
              }
  }
  
  
  
  // adjust mouse position to the matrix of SVG &amp; screen size
  function MousePos(event) {
          var p = svg.createSVGPoint();
          p.x = event.clientX;
          p.y = event.clientY;
          var matrix = svg.getScreenCTM();
          p = p.matrixTransform(matrix.inverse());
          return {
              x: p.x,
              y: p.y
          }
  }
  </code></pre>