How do you turn off setDragImage

Question

just as it states. how do you disable the drag image. I have a floating panel and the drag image looks very bad. no-jquery please.

Answer 1

From MDN:

If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this.

From this it would follow that to "turn off" the drag image you should just pass an empty (but visibile) element to setDragImage. How about this:

// create an empty <span>
var dragImgEl = document.createElement('span');

// set its style so it'll be effectively (but not technically) invisible and
// won't change document flow
dragImgEl.setAttribute('style',
  'position: absolute; display: block; top: 0; left: 0; width: 0; height: 0;' );

// add it to the document
document.body.appendChild(dragImgEl);

// your DataTransfer code here--assume we put it in a variable called 'dt'

dt.setDragImage(dragImgEl, 0, 0);

If an empty <span> doesn't work for some reason you could always use <img src="blank.png"/> where blank.png is a transparent 1-pixel PNG. Hope that helps!

Answer 2

Set the ghost image to a transparent 1x1px gif using data string

Took inspiration from a comment in the thread, however the image they put in their comment didn't work so I had to scour around for this one.

This solves my issue in all browsers.

element.ondragstart = function (ev) {
  var img = document.createElement('img')
  img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  ev.dataTransfer.setDragImage(img, 0, 0)
}