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. jsfiddle.net/ezu33hjg (VTCed) — Kaiido
– Kaiido, Commented Mar 5, 2018 at 8:45
I think it's not possible yet. But you can try to replace ghost image with a transparent one — JSEvgeny
– JSEvgeny, Commented Mar 5, 2018 at 8:50
@Kaiido you are right. I don't know that jQuery wraps dom events. This should be the answer. — Aetherus
– Aetherus, Commented Mar 5, 2018 at 8: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 stackoverflow.com/questions/7640234/… — Kaiido
– Kaiido, Commented Mar 5, 2018 at 9:03

Aetherus · Accepted Answer · 2018-03-05 09:11:56Z

2

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);
});

answered Mar 5, 2018 at 9:11

Aetherus

8,9281 gold badge27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

Problem

Trial and error #1

Trial and error #2

Trial and error #3

Trial and error #4

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Trial and error #1

Trial and error #2

Trial and error #3

Trial and error #4

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related