Safari上的setDragImage意外崩溃

问题描述：

在确定为什么尝试使用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意外崩溃

相关推荐