软件 拖拽 修改html5,你可以在HTML5 Drag Drop API中动态更改拖动的元素吗？

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 }

谢谢您的帮助 .