Safari上的setDragImage意外崩溃 [英] setDragImage on Safari Crashes Unexpectedly

问题描述

在确定为什么尝试使用setDragImage（）方法时Safari 6.0+意外崩溃时，我有困难。

I am having difficulties determining why Safari 6.0+ crashes unexpectedly when trying to use the setDragImage() method.

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

I have a dragstart event and I would like to attach a background image while this is occuring. The documented way to go about this is to utilize the setDragImage() method on the event wireup. This works perfectly fine in Firefox and Chrome.

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

I know this is possible because when I run this website with the Safari browser the drag image works perfectly.

但是，在我的一个简单的示例它会爆炸。

However, in my simple example it blows up.

HTML：

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

JavaScript：

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（）方法上使用的图像元素，浏览器将中止线程。解决方法很简单。在调用方法之前，请确保已加载图像元素。最简单的方法是在事件外部创建图像元素。

I've determined that if the image element you are using on the setDragImage() method hasn't loaded, the browser will thread abort. The fix is simple. Make sure the image element is loaded before calling the method. The easiest way to do this is to create the image element outside of the event.

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

这篇关于Safari上的setDragImage意外崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！