setDragImage 不删除 Chrome 上的重影图像？答案

【问题标题】：setDragImage not removing ghost image on Chrome?setDragImage 不删除 Chrome 上的重影图像？
【发布时间】：2018-11-12 16:02:43
【问题描述】：

我有一个可拖动的元素。我想删除重影图像，因为我会以另一种方式创建它。

但是，谷歌浏览器不允许我使用setDragImage() 阻止重影图像的出现。空白图像是在拖动之前创建的，我在dragstart 事件处理程序中使用setDragImage()，所以我看不出我做错了什么。重影图像不应出现。

这是一个例子：

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => {
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  });

.item {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;
}

.item__img {
  width: 100%;
  height: auto;
}

<div draggable="true" class="item">
  <img src="https://i.stack.imgur.com/drhx7.png" alt="" class="item__img">
</div>

在 Chrome 上，如果拖动带有红色边框的框，则会出现重影图像，即使我使用的是setDragImage()。一切都在 Firefox 上正常运行（而 Edge...甚至没有这个功能）。

我的 Chrome 版本是 66。

【问题讨论】：

标签： javascript html google-chrome drag-and-drop html5-draggable

【解决方案1】：

问题来自图像。如果您尝试拖动红色边框，它将正常工作。只有在可拖动元素内的图像上开始拖动时，才会出现该问题。也许 Chrome 对图像有一些特殊的处理；我不知道。

您可以通过禁用图像上的指针事件来缓解这种情况：

.item img {
  pointer-events: none;
}

这是一个工作示例：

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => {
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  });

.item {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;
}

.item__img {
  width: 100%;
  height: auto;
  
  /* The fix */
  pointer-events: none;
}

<div draggable="true" class="item">
  <img src="https://i.stack.imgur.com/drhx7.png" alt="" class="item__img">
</div>

【讨论】：

您知道如何删除此示例中添加到光标上的地球图标吗？我看到一些建议使用onmousedown="event.preventDefault()"，但这完全禁用了拖动。
我不确定您所说的“地球图标”是什么意思。您是在谈论不允许光标吗？如果是这样，我认为没有任何简单的方法可以改变它。我相信拖放过程中使用的光标是基于平台的。对于自定义光标，您必须使用 JavaScript 重新实现自己的拖放操作。
那个地球图标很郁闷
@ness-EE 如果您在谈论不允许光标，我认为这意味着您的鼠标不在有效的放置目标上。也许如果您有一个容器是图像周围的有效放置目标，那么光标不会立即变为不允许。但这有点超出了这个问题的范围。
@ness-EE 我遇到了同样的地球图标问题（mac + chrome）。解决方案是画布需要成为 DOM 的一部分。如果我们在 e.dataTransfer.setDragImage(blankCanvas, 0, 0); 这一行之前扩展上面的例子，你会想要这样的东西：document.body.appendChild(blankCanvas);。这应该删除“404”地球默认图标。（当然你可以在 dragend 事件中移除 blankCanvas 元素。

【解决方案2】：

添加到@ness-EE 提供的解决方案。

这是我使用的解决方案，也处理了将地球隐藏在 chrome 中的情况

public handleDragStart( event : DragEvent ) : void {
    const blankCanvas: any = document.createElement('canvas');
    event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
    document.body?.appendChild( blankCanvas);
}

【讨论】：