setDragImage不会删除Chrome上的重影图像?

Question

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

但是，谷歌浏览器不允许我使用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()，也会出现鬼像。一切都在火狐(和边缘...甚至没有该功能(。

我的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);
}