setDragImage 不删除 Chrome 上的重影图像?
setDragImage not removing ghost image on Chrome?
我有一个可拖动的元素。我想删除重影图像,因为我将以另一种方式创建它。
但是,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.
问题出在图像上。如果您尝试拖动红色边框,它将正常工作。只有在可拖动元素内的图像上开始拖动时才会出现此问题。也许 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>
添加到@ness-EE提供的解决方案中。
这是我使用的解决方案,也处理了在 chrome
中隐藏地球的情况
public handleDragStart( event : DragEvent ) : void {
const blankCanvas: any = document.createElement('canvas');
event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
document.body?.appendChild( blankCanvas);
}
我有一个可拖动的元素。我想删除重影图像,因为我将以另一种方式创建它。
但是,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.
问题出在图像上。如果您尝试拖动红色边框,它将正常工作。只有在可拖动元素内的图像上开始拖动时才会出现此问题。也许 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>
添加到@ness-EE提供的解决方案中。
这是我使用的解决方案,也处理了在 chrome
中隐藏地球的情况public handleDragStart( event : DragEvent ) : void {
const blankCanvas: any = document.createElement('canvas');
event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
document.body?.appendChild( blankCanvas);
}