Question

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

但是，谷歌浏览器不允许我停止使用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://placehold.it/200x200?text=Drag+Me" 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://placehold.it/200x200?text=Drag+Me" alt="" class="item__img">
</div>

setDragImage没有删除Chrome上的鬼影？

1 个答案: