如何使用CSS或JavaScript拖动img时删除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);
});

但是我的Chrome浏览器抱怨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);
});