How can I disable the image dragging efect?

Question

I am working on a carousel which is working great, the only problem is that when I drag the image, a ghosting replica hovers above the image. This also happens when I drag the image container.

I tried with draggable="false" and also with user-select: none !important; but none of them worked.

How can I solve this problem?

you can also override drag action https://stackoverflow.com/a/4211936/3459770 — jiten, Mar 24 '19 at 16:05
Possible duplicate of [Disable dragging an image from an HTML page](https://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page) — kognise, Mar 24 '19 at 16:06

score 1 · Answer 1 · answered Mar 24 '19 at 16:36

1

Just add this to your CSS

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

That's all you need to do.

answered Mar 24 '19 at 16:36

score 0 · Answer 2 · answered Mar 24 '19 at 16:05

0

Use the CSS selector pointer-events. So, give it the style pointer-events: none;. Here's some more documentation on that.

Hope this helps!

answered Mar 24 '19 at 16:05

kognise

612
1
8
23

Cedric Ipkiss · Answer 3 · 2019-03-24T16:29:35.143

0

Do something like this:

document.getElementById('drag').ondragstart = function() { return false; };

<img src="https://images.pexels.com/photos/2016999/pexels-photo-2016999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="drag" />

edited Mar 24 '19 at 16:29

answered Mar 24 '19 at 16:16

Cedric Ipkiss

5,662
2
43
72

if i use this I can't swipe through the images anymore – medve.cfg Mar 24 '19 at 16:26
@MedveTheFab, implement the swipe on a parent element, not on the image itself – Cedric Ipkiss Mar 24 '19 at 16:28

How can I disable the image dragging efect?

3 Answers3