Question

我在确定尝试使用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;
}

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

Safari上的setDragImage意外崩溃

1 个答案: