Description ：
我正在尝试向canvas元素添加拖放功能 . 我观察到浏览器本身支持拖放图像元素，拖动的图像也可以直接添加到gmail或保存在计算机上 .
Considered Solution1 ：
1.我将拖动的元素（'canvas'）包装在div标签中，并为其添加'draggable' true属性 .
2.我将一个图像元素（使用 canvas.toDataURL('images/png') ）附加到父拖动的div并隐藏图像 .
3.一旦dragStart触发，我就会显示图像元素并隐藏数据元素 .
Problem ：
不幸的是，这似乎不起作用 . 被拖动的事件仍然认为这是一个div .
（例如：这不能放在Gmail电子邮件中） .
Investigation till now ：
我找到的关键区别是拖动的事件，其中有一个名为targetElement的属性，sourceElement和toElement被设置为div（在我的情况下）与img相比（如果div中只有一个图像） .
将事件对象在我的情况（DIV '画布'）sourceCapabilities：InputDeviceCapabilities srcElement：DIV＃test_container <==这是一个div目标：DIV＃test_container <==这是DIV时间戳：1454458126932 toElement：DIV＃test_container <= =这是div类型：“dragstart”
与...相比
在只有图像的div中拖动事件 . sourceCapabilities：InputDeviceCapabilities srcElement：IMG＃MYTEST <==这是IMG目标：IMG＃MYTEST <==这是IMG时间戳：1454458674491 toElement：IMG＃MYTEST <==这是IMG类型： “的dragstart”
Questions ：
1.我可以在拖动的事件中动态更改srcElement和targetElement吗？
2.我是否可以通过API调用浏览器来重新计算拖动的事件？
3.是否有一个事件在dragEvent启动之前被触发，以便我可以在那里翻转？
MyCode For 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 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 }
谢谢您的帮助 .