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?

Answer 1

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

Hope this helps!

Answer 2

做这样的事情：

 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" /> 

Answer 3

Just add this to your CSS

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

That's all you need to do.