Question

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

我在ondragstart事件期间使用了datatransfer.setdata（），在事件ondrop上使用了datatransfer.getdata（）。它在firefox中运行得很好，但在chrome中不起作用。我已经知道在chrome datatransfer中不支持。那么，什么是一个很好的解决方案，也应该是跨浏览器兼容的！

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

Answer 1

我知道这个众所周知的马可能已经解决了这个问题，但我也刚刚在Chrome中注意到这个问题与getData / setData。对我来说，如果您使用“text”或“text / plain”作为数据的格式，它只能，而其他所有内容都会因event.dataTransfer.getData(format)返回undefined而失败。< / p>

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

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

Datatransfer无法使用chrome

1 个答案: