How to remove ghost image when dragging an img using CSS or JavaScript?

Question

Problem

I have the following html snippet

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

I want to change the position of the .image-wrapper when a user drags the image, but I don't want the ghost image while dragging the image.

Trial and error #1

I've tried adding draggable="false" to the image, like

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

but this totally prevents the image to be able to drag, and thus no event is triggered when I try to drag the image. I do want to drag the image, I just don't want the ghost image when dragging.

Trial and error #2

I've tried the following CSS

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

but again my image becomes undraggable. By the way, any value other than none won't remove the ghost image.

Trial and error #3

I've tried the JS approach (with 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);
});

but my chromium browser complains that event.dataTransfer is undefined (I've double checked the code and there is no typo).

Trial and error #4

I've tried

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

but it seems that the event stops propagation and thus the wrapping div can't catch the event and change its position accordingly.

So how can I enable image dragging, keeping the event properly propagated, and remove the ghost image while dragging?

Thanks in advance.

Yes there is a typo: in your #3: the `event` variable you have is the one from jQuery, not the DOM one. You want `event.originalEvent`. https://jsfiddle.net/ezu33hjg/ (VTCed) — Kaiido, Mar 05 '18 at 08:45
I think it's not possible yet. But you can try to replace ghost image with a transparent one — JSEvgeny, Mar 05 '18 at 08:50
@Kaiido you are right. I don't know that jQuery wraps dom events. This should be the answer. — Aetherus, Mar 05 '18 at 08:58
@Aetherus I did, off-topic > "This question was caused by a typo". And hence I didn't want to answer either. but if you wish, it can also be closed as dµpe of https://stackoverflow.com/questions/7640234/jquery-ui-draggable-droppable-datatransfer-is-undefined — Kaiido, Mar 05 '18 at 09:03
@Kaiido this is not a typo. This is my misunderstanding of jQuery. If you don't want to answer, I'll answer my own question using your advice. Thanks anyway. — Aetherus, Mar 05 '18 at 09:05
Then it's a dupe of https://stackoverflow.com/questions/7640234/jquery-ui-draggable-droppable-datatransfer-is-undefined — Kaiido, Mar 05 '18 at 09:05

score 2 · Accepted Answer · answered Mar 05 '18 at 09:11

Since @Kaiido don't want to answer the question, I'll answer this question myself using his advice.

As @Kaiido pointed out in the comments of the question, jQuery wraps the dom events. The original event is available through event.originalEvent. So I can just modify my "Trial and error #3" like

$('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);
});