Как отключить setDragImage

Ответ 1

От MDN:

Если node является элементом HTML img, элементом HTML canvas или элементом XUL image, используются данные изображения. В противном случае image должен быть видимым node, и из него будет создано изображение перетаскивания.

Из этого следует, что для "выключения" изображения перетаскивания вам нужно просто передать пустой (но видимый) элемент в setDragImage. Как насчет этого:

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

Если пустой <span> не работает по какой-либо причине, вы всегда можете использовать <img src="blank.png"/>, где blank.png - прозрачный 1-пиксельный PNG. Надеюсь, что это поможет!

Ответ 2

Установите образ призрака в прозрачный 1x1px gif с помощью строки данных

Вдохновлял комментарий в теме, однако изображение, которое они помещали в их комментарии, не работало, поэтому мне пришлось пробираться вокруг этого.

Это решает мою проблему во всех браузерах.

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