javascript - Safari上的setDragImage意外崩溃

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

我有一个dragstart事件，在发生这种情况时，我想附加一个背景图像。记录此问题的方法是利用事件联结上的setDragImage()方法。在Firefox和Chrome浏览器中，这工作得很好。

我知道这是可能的，因为当我使用Safari浏览器运行this website时，拖动图像可以完美运行。

但是，在我的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;
}

最佳答案

我已确定，如果尚未加载您在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);

关于javascript - Safari上的setDragImage意外崩溃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22565909/