Question

I’m currently coding HTML5 drag and drop. On a certain area I’m looking to have it’s drag image set as a trash icon, and when the mouse is over a draggable area to have non-specific image. I have the events down and logic working for that, however it doesn’t appear as though the setDragImage() function may only be available on the dragstart function. Is this really the only event you can assign the setDragImage() at? I’ve looked through the spec and it doesn’t seem to say either way.

Answer 1

This is the relevant part within the Firefox codebase that shows that the DataTransfer object (which holds the drag image) is set to readonly after dragstart.

https://mxr.mozilla.org/mozilla-central/source/content/events/src/nsEventStateManager.cpp#2141

2138       // now that the dataTransfer has been updated in the dragstart and
2139       // draggesture events, make it read only so that the data doesn't
2140       // change during the drag.
2141       dataTransfer->SetReadOnly();

And here is the setDragImage method which shows that it checks for readonly before allowing the image to be set.

https://mxr.mozilla.org/mozilla-central/source/content/events/src/nsDOMDataTransfer.cpp#581

580 NS_IMETHODIMP
581 nsDOMDataTransfer::SetDragImage(nsIDOMElement* aImage, int32_t aX, int32_t aY)
582 {
583   if (mReadOnly)
584     return NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR;
585 
586   if (aImage) {
587     nsCOMPtr<nsIContent> content = do_QueryInterface(aImage);
588     NS_ENSURE_TRUE(content, NS_ERROR_INVALID_ARG);
589   }
590   mDragImage = aImage;
591   mDragImageX = aX;
592   mDragImageY = aY;
593   return NS_OK;
594 }

From the above code, it shows that the drag image can only be updated within the dragstart event in Gecko.