Safari上的setDragImage意外崩溃

Question

在尝试使用setDragImage()方法时,我很难确定为什么Safari 6.0+会意外崩溃.

我有一个dragstart事件,我想在发生这种情况时附上背景图像.记录的方法是在事件连线上使用setDragImage()方法.这在Firefox和Chrome中运行得非常好.

我知道这是可能的,因为当我使用Safari浏览器运行这个网站时,拖动图像可以很好地工作.

然而,在我的简单例子中,它爆炸了.

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