title: Drag HTML5 element to SVG/D3
body: <p>I can drag a HTML5 element</p>
  
  <pre><code>&lt;div id='item1' draggable='true' ondragstart='onDragStart(event)'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>to an SVG element</p>
  
  <pre><code>&lt;circle ondragover='allowDrop(event)'&gt;&lt;/circle&gt;
  </code></pre>
  
  <p>This is the script:</p>
  
  <pre><code>function onDragStart(ev) {
      ev.dataTransfer.setData("text", ev.target.textContent);
  }
  function allowDrop(ev) {
      ev.preventDefault();
  }
  
  // D3
  myCircle.on('drop', function(nodeData) {
      // nodeData only gives me information about the destination circle
      console.log('Dropping something unknown on ' + nodeData.data.name);
  });
  </code></pre>
  
  <p>But how do I get information about the div being dragged?</p>
  
  <p><strong>EDIT: Solution</strong></p>
  
  <p>Finally figured it out! Use <code>d3.event.dataTransfer</code></p>
  
  <pre><code>myCircle.on('drop', function(nodeData) {
      console.log('Dropping ' + d3.event.dataTransfer.getData('text') + ' on ' + nodeData.data.name);
  });
  </code></pre>