Safari 上的 setDragImage 意外崩溃

2022-01-11 00:00:00 drag-and-drop javascript safari

在尝试使用 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);

相关文章