1

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

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

这是一个例子：

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。

4

2 回答 2

2

问题来自图像。如果您尝试拖动红色边框，它将正常工作。只有在可拖动元素内的图像上开始拖动时，才会出现该问题。也许 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>

于 2018-06-02T22:14:56.507 回答
1

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

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

public handleDragStart( event : DragEvent ) : void {
    const blankCanvas: any = document.createElement('canvas');
    event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
    document.body?.appendChild( blankCanvas);
}
于 2022-02-01T22:14:22.363 回答