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

Question

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

但是，Google Chrome 并不能阻止我使用 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.

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

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

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

setDragImage not removing ghost image on Chrome?

javascript

html

google-chrome

drag-and-drop

html5-draggable