你如何关闭setDragImage

Question

就像它说的那样.你如何禁用拖动图像.我有一个浮动面板,拖动图像看起来很糟糕.请不要.

Answer 1

来自MDN:

如果节点是HTML img元素,HTML canvas元素或XUL image元素,则使用图像数据.否则,image应该是可见节点,并且将从此创建拖动图像.

从此可以看出,"关闭"拖动图像应该只是将空(但可见)元素传递给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.希望有所帮助!

Answer 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)
}