stop Chrome's click and hold / drag image default behavior


Solution 1

You can prevent this behavior by using the property

-webkit-user-drag: auto | element | none;

See the doc of -webkit-user-drag (I didn't find an MDN doc, if someone has a better reference)

How to use

Add a .nonDraggableImage class on your img tags, and add on your CSS :

    -webkit-user-drag: none;

Solution 2

I had to use a different solution to get it working:

<img src="" draggable="false">


Solution 3

Another way is to create a transparent picture over the top of the picture you want to prevent viewing.

Please see:

check under "Tricking the downloaders"


Related videos on Youtube

Irfan Mir
Author by

Irfan Mir

Updated on September 16, 2022


  • Irfan Mir
    Irfan Mir about 1 year

    I've noticed that in Google Chrome, one can click and hold an image and while holding a semi-transparent copy of that image attaches itself with the cursor. Then one can drag that image to the desktop to save it.

    I want to prevent and stop the semi-transparent version of the image attaching itself to the cursor on hold of certain images in my site.

    How can I do this?

  • Bigood
    Bigood over 10 years
    +1 Nice trick :) as it prevents basic user from right clicking and saving. But the "clean" way to prevent OP's behavior is still to use -webkit-user-drag: none;
  • chopper draw lion4
    chopper draw lion4 over 6 years
    There is no IE equivalent to this property.
  • Phil
    Phil over 5 years
    This is also useful to prevent links styled as buttons (Bootstrap a.btn) from being accidentally dragged by a clumsy user (me)
  • Ben Wheeler
    Ben Wheeler about 4 years
    Does not seem to work on Firefox (using Mac Firefox 69
  • Ben Wheeler
    Ben Wheeler about 4 years
    Does not seem to work on Firefox (using Mac Firefox 69)
  • Bigood
    Bigood about 4 years
    @BenWheeler Indeed, it's a webkit property, not a standard (thus the mandatory -webkit prefix).
  • Brian Klug
    Brian Klug about 3 years
    This is the correct answer in 2020. Works on Firefox, Chrome, Opera, Edge and even Internet Explorer. Funny how this is downvoted and the "-webkit-user-drag" answer .. which obviously will only work on webkit based browsers (lol) is upvoted. Maybe it's just out of date.