如何使用CSS或JavaScript拖动图像时删除ghost图像？

Question

问题

我有以下html片段

<div class="image-wrapper">
  <img src="...">
</div>

我想在用户拖动图像时更改.image-wrapper的位置，但是在拖动图像时我不想要重影图像。

试验和错误＃1

我尝试过将draggable="false"添加到图像中，就像

<div class="image-wrapper">
  <img src="..." draggable="false">
</div>

但这完全阻止了图像能够拖动，因此当我尝试拖动图像时不会触发任何事件。我想拖动图像，我只是不想拖动时的鬼图像。

试验和错误＃2

我尝试过以下CSS

img {
  -webkit-user-drag: none;
  user-drag: none;
}

但是我的形象再次变得无法实现。顺便说一句，除了none之外的任何值都不会删除重影。

试错了＃3

我尝试过JS方法（使用jQuery）

$('img').on('dragstart', function (event) {
  var emptyImage = document.createElement('img');
  // Set the src to be a 0x0 gif
  emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
  event.dataTransfer.setDragImage(emptyImage, 0, 0);
});

但我的铬浏览器抱怨event.dataTransfer是undefined（我已经仔细检查了代码并且没有拼写错误）。

试错了＃4

我试过了

$('img').on('dragstart', function (event) {
  event.preventDefault();
});

但似乎事件停止传播，因此包装div无法捕获事件并相应地改变其位置。

那么如何启用图像拖动，保持事件正确传播，并在拖动时删除重影图像？

提前致谢。

Answer 1

由于@Kaiido不想回答这个问题，我将使用他的建议自己回答这个问题。

正如@Kaiido在问题的评论中指出的那样，jQuery包含了dom事件。原始活动可通过event.originalEvent获得。所以我可以修改我的“试验和错误＃3”之类的

$('img').on('dragstart', function (event) {
  var emptyImage = document.createElement('img');
  // Set the src to be a 0x0 gif
  emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
  event.originalEvent.dataTransfer.setDragImage(emptyImage, 0, 0);
});