Javascript 数据传输在chrome中不工作

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

我在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);

---

我知道众所周知的horse可能已经解决了这个问题，但我也注意到了Chrome中getData/setData的这个问题。对我来说，它只有在使用“text”或“text/plain”作为数据格式时才起作用，其他所有操作都会因

event.dataTransfer.getData（format）

返回

未定义

而失败

在Chrome的开发者工具中，您可以检查

event.dataTransfer.types

属性，查看getData/setData函数的“format”参数接受哪些值

---

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

一个相关的代码片段会有所帮助：）@ebidel我添加了一个代码片段！事实上，数据传输已经在Chrome上运行了多年。您在

事件.dataTransfer.setData（）

中没有使用有效的MIME类型。Chrome过去在处理MIME类型时存在问题，除了

text/plain

和

text/uri list

之外，但这在版本19中得到了修复。一位同事告诉我，Chrome 24或Chrome 22肯定不适用于我们。如果我们能想出一个解决方案，我们一定会把它贴在这里。我也遇到了这个问题。使用“文本”或“文本/纯文本”对我不起作用。Chromium在Firefox中运行良好。Chromium在处理

文本/uri列表

-传输uri列表时，它们应该用

\n

分隔。但是Chrome去掉了换行符，所以目标只接收一长串连接在一起的URI。这个bug是在2013年被报告的（），7年来它仍然困扰着开发者！