setDragImage不删除Chrome上的重影图像？
setDragImage不删除Chrome上的重影图像？
提问于 2018-06-03 06:14:57
我有一个可拖动的元素。我想删除鬼影图像，因为我将以另一种方式创建它。
然而，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。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-03 06:14:57
问题出在图像上。如果您尝试拖动红色边框，它将正常工作。只有当在可拖动元素内的图像上开始拖动时，问题才会出现。也许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>
Stack Overflow用户
发布于 2022-02-01 22:14:22
添加到@ness-EE提供的解决方案中。
这是我使用的解决方案，还可以处理在chrome中隐藏地球的情况。
public handleDragStart( event : DragEvent ) : void {
const blankCanvas: any = document.createElement('canvas');
event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
document.body?.appendChild( blankCanvas);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50661599
复制相关文章
相似问题
腾讯云开发者
