javascript - Safari 上的 setDragImage 意外崩溃

Question

我无法确定为什么 Safari 6.0+ 在尝试使用 setDragImage() 方法时意外崩溃。

我有一个 dragstart 事件，我想在此过程中附加一张背景图片。解决此问题的记录方法是在事件接线上使用 setDragImage() 方法。这在 Firefox 和 Chrome 中工作得很好。

我知道这是可能的，因为当我运行 this website在 Safari 浏览器中，拖动图像效果完美。

然而，在我的simple example它爆炸了。

HTML:

 <div  draggable='true' class='dragme'>
  </div>

JavaScript:

var dragMe = document.querySelector('.dragme');

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setData('Test', 'some data');   
    var img = document.createElement("img");   
    img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

CSS:

.dragme
{
  border:1px solid red;
  height:100px;
  background-color:blue;
}

Answer 1

我已经确定，如果您在 setDragImage() 方法上使用的图像元素尚未加载，浏览器将线程中止。修复很简单。确保在调用该方法之前已加载图像元素。最简单的方法是在事件之外创建图像元素。

//Preload the image
var img = document.createElement("img");   
img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setData('Test', 'some data');   
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);