javascript - Can you dynamically change the dragged Element in HTML5 Drag Drop API? -

description:
trying add drag , drop functionality canvas element. observed browser natively supports dragging , dropping image elements , dragged images can directly added gmail or saved on computer.

considered solution1:
1. wrap dragged element ('canvas') in div tag , add 'draggable' true attribute it.
2. append image element(using canvas.todataurl('images/png')) parent dragged div , hide image.
3. once dragstart fires show image element , hide data element.

problem:
unfortunately not seem work. dragged event still considers div.
(eg: cannot dropped on gmail email).

investigation till now:
key difference found dragged event had attributes called targetelement, sourceelement , toelement set div(in case) compared img(in case there image inside div).

drag event object in case.(div 'canvas')
sourcecapabilities: inputdevicecapabilities
srcelement: div#test_container <== div
target: div#test_container <== div
timestamp: 1454458126932
toelement: div#test_container <== div
type: "dragstart"

when compared

drag event in div having image.
sourcecapabilities: inputdevicecapabilities
srcelement: img#mytest <== img
target: img#mytest <== img
timestamp: 1454458674491
toelement: img#mytest <== img
type: "dragstart"

questions:
1. can dynamically change srcelement , targetelement in dragged event ?
2. there api can call browser recalculate dragged event ?
3. there event fired before dragevent started can flip there?

mycode reference:

 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 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     } 

thanks help.