你如何关闭 setDragImage答案

【问题标题】：How do you turn off setDragImage你如何关闭 setDragImage
【发布时间】：2018-10-27 00:21:14
【问题描述】：

正如它所说。你如何禁用拖动图像。我有一个浮动面板，拖动图像看起来很糟糕。请不要使用 jquery。

【问题讨论】：

jsfiddle 请举例。

标签： javascript

【解决方案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。希望对您有所帮助！

【讨论】：

干得好！救了我一两次头痛。太糟糕了，OP 没有接受这个作为答案....youtube.com/watch?v=wRnSnfiUI54
您可以使用数据 URL 即时创建透明像素：var img = document.createElement('img'); img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
这条评论应该被分解成一个单独的，超级赞成的答案。
这在当前的 Firefox 中看起来不适合我。

【解决方案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)
}

【讨论】：

这在 Safari 中对我不起作用。在这个答案中找到了如何改进它stackoverflow.com/a/22610927/467851

【解决方案3】：

将其设置为非来源图像：

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

【讨论】：

在 Chrome 中，这将在光标旁边显示一个损坏的图像图标。