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

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.

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:

var dragMe = document.querySelector('.dragme');

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setData('Test', 'some data');   
    var img = document.createElement("img");   
    img.src = ".png";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

CSS:

.dragme
{
  border:1px solid red;
  height:100px;
  background-color:blue;
}

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

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.

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:

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/images/hackergotchi-simpler.png";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

CSS:

.dragme
{
  border:1px solid red;
  height:100px;
  background-color:blue;
}

• javascript
• safari
• drag-and-drop

Share Improve this question Follow asked Mar 21, 2014 at 17:45 cgatiancgatian 23k99 gold badges6060 silver badges7777 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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/images/hackergotchi-simpler.png";

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setData('Test', 'some data');   
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);