title: Can you dynamically change the dragged Element in HTML5 Drag Drop API?
body: <p><strong>Description</strong>:<br>
  I am trying to add drag and drop functionality to canvas element. I observed that the browser natively supports dragging and dropping image elements and also the dragged images can directly be added to gmail or saved on computer.</p>
  
  <p><strong>Considered Solution1</strong>:<br>
  1. I wrap the dragged element ('canvas') in a div tag and add 'draggable' true attribute to it.<br>
  2. I append an image element(using <code>canvas.toDataURL('images/png')</code>) to the parent dragged div and hide the image.<br>
  3. Once the dragStart fires I show the image element and hide the data element. </p>
  
  <p><strong>Problem</strong>:<br>
  Unfortunately this does not seem to work. The dragged event still considers this to be a div.<br>
  (<em>Eg: This cannot be dropped on a gmail email</em>).    </p>
  
  <p><strong>Investigation till now</strong>:<br>
  The key difference that I found was the dragged event that had attributes called targetElement, sourceElement and toElement are set to the div(in my case) as compared to img(in case there is just an image inside a div).</p>
  
  <blockquote>
    <p>Drag Event Object in my case.(div 'canvas')<br>
    sourceCapabilities: InputDeviceCapabilities<br>
    srcElement: div#test_container   &lt;== this is a div<br>
     target: div#test_container  &lt;== this is div<br>
     timeStamp: 1454458126932<br>
     toElement: div#test_container  &lt;== this is div<br>
     type: "dragstart"</p>
  </blockquote>
  
  <p>When compared to </p>
  
  <blockquote>
    <p>Drag Event in a div having just an image.<br>
    sourceCapabilities: InputDeviceCapabilities<br>
    srcElement: img#myTest  &lt;== this is img<br>
    target: img#myTest  &lt;== this is img<br>
    timeStamp: 1454458674491<br>
    toElement: img#myTest  &lt;== this is img<br>
    type: "dragstart"  </p>
  </blockquote>
  
  <p><strong>Questions</strong>:<br>
  1. Can I dynamically change the  srcElement and targetElement in the dragged event ?<br>
  2. Is there an API which I can call for browser to recalculate the dragged event ?<br>
  3. Is there an event which is fired before the dragEvent is started so that I can do the flip there?</p>
  
  <p><strong>MyCode For Reference</strong>: </p>
  
  <pre><code> 27   function createImage(svgText) {
   28       var canvas = document.getElementById('myCanvas');
   29         return canvas.toDataURL('image/png');
   30     }
   31     function cacheImage(containerId) {
   32         var container = d3.select('#' + containerId),
   33             imageEle = new Image();
   34         imageEle.src = createImage(container.html().trim());
   36         imageEle.id = 'myTest';
   37         imageEle.style.display = 'none';
   38         document.getElementById(containerId).appendChild(imageEle);
   39         container.select('svg').style('display', 'none');
   40         container.select('#myTest').style('display', 'block');
   41         return imageEle;
   42     }
   43     function flip(containerId) {
   44         var container = d3.select('#' + containerId);
   45         container.select('canvas').style('display', 'none');
   46         container.select('#myTest').style('display', 'block');
   47     }
   48     function flipBack(containerId) {
   49         var container = d3.select('#' + containerId);
   50         container.select('canvas').style('display', 'block');
   51         container.select('img').style('display', 'none');
   52     }
   53     function attachDragDrop(containerId) {
   54         var parentDiv = d3.select('#' + containerId),
   55             parentEle = document.getElementById(containerId);
   56         cacheImage(containerId); // Add an Image
   57         parentDiv.attr('draggable', 'true');
   58         parentEle.addEventListener('dragstart', function(ev){
   59             flip(containerId);
   60         }, false);
   61         parentEle.addEventListener('dragend', function() {
   62                 flipBack(containerId);
   63           }, false);
   64     }
  </code></pre>
  
  <p><em>Thanks for the help.</em></p>