Chrome中的数据传输

Datatransfer in Chrome

本文关键字：数据传输 Chrome      更新时间：2024-02-19

我正在实现从缩略图拖动图像，并将其放入画布中绘制。

我在事件ondragstart期间使用了datatransfer.setdata()，在事件ondrop上使用了datatransfer.getdata()。它在Firefox中运行良好，但在Chrome中不起作用。我知道在Chrome中不支持数据传输。所以，什么是一个好的解决方案，也应该是跨浏览器兼容！

function dragIt(event) {
event.dataTransfer.setData("URL", event.target.id)
};
function dropIt(event) {
  var theData = new Image();
  theData = event.dataTransfer.getData("URL");
  dt = document.getElementById(theData);
  event.preventDefault();
  var ctx = this.getContext('2d');
  ctx.clearRect(0,0,this.width,this.height);
  ctx.drawImage(dt, 0, 0);      
};
var out = document.getElementById('out');
        var Can1 = document.createElement("canvas");
        Can1.height="100";
        Can1.width="100";
        Can1.style.cssText = 'position:relative; top:5px;left:500px;border:2px  solid black;'  
        Can1.ondragover = function(event) {
        event.preventDefault();
        };
        Can1.ondrop = dropIt;  
        out.appendChild(Can1);

我知道谚语中的马可能已经抓住了这个问题，但我刚刚在Chrome的getData/setData中注意到了这个问题。对我来说，如果您使用"text"或"text/plain"作为数据的格式，并且event.dataTransfer.getData(format)返回undefined，那么它只适用于。

在Chrome的开发工具中，您可以检查event.dataTransfer.types属性，以查看getData/setData函数的"format"参数接受哪些值。

因此，将"URL"更改为"文本"可能会解决这种情况下的问题。不幸的是，到目前为止，我还没有找到任何关于Chrome为什么选择只实现这些格式的信息。

相关文章：