Question

描述：
我正在尝试向canvas元素添加拖放功能。我观察到浏览器本身支持拖放图像元素，拖动的图像也可以直接添加到Gmail或保存在计算机上。

考虑解决方案1 ：
1.我将拖动的元素（＆＃39;画布＆＃39;）包装在div标签中并添加“可拖动的”＃39;它的真正属性。
2.我将一个图像元素（使用canvas.toDataURL('images/png')）附加到父拖动的div并隐藏图像 3.一旦dragStart触发，我就会显示图像元素并隐藏数据元素。

问题：
不幸的是，这似乎不起作用。被拖动的事件仍然认为这是一个div （例如：这不能放在Gmail电子邮件上）。

调查至今：
我找到的关键区别是拖动的事件，其中有一个名为targetElement的属性，sourceElement和toElement被设置为div（在我的情况下）与img相比（如果div中只有一个图像）。

在我的案例中拖动事件对象。（div＆＃39; canvas＆＃39;）
  sourceCapabilities：InputDeviceCapabilities
  srcElement：div＃test_container＆lt; ==这是一个div
   target：div＃test_container＆lt; ==这是div
   timeStamp：1454458126932
   toElement：div＃test_container＆lt; ==这是div
   键入：＆＃34; dragstart＆＃34;

与

相比

在只有图像的div中拖动事件   sourceCapabilities：InputDeviceCapabilities
  srcElement：img #myTest＆lt; ==这是img
  target：img＃myTest＆lt; ==这是img
  timeStamp：1454458674491
  toElement：img #myTest＆lt; ==这是img
  键入：＆＃34; dragstart＆＃34;

问题：
1.我可以在拖动的事件中动态更改srcElement和targetElement吗？ 2.我是否可以通过API调用浏览器重新计算拖动的事件？
3.是否有一个事件在dragEvent启动之前被触发，以便我可以在那里进行翻转？

MyCode供参考：

 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     }

感谢您的帮助。

你可以在HTML5 Drag Drop API中动态更改拖动的元素吗？

0 个答案: