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

Answer 3

将其设置为非源图像：

event.dataTransfer.setDragImage(document.createElement('img'), 0, 0);

你如何关闭setDragImage

3 个答案: