Search code examples
htmlcssdrag-and-dropdraggabledrag

Make image not-draggable but still clickable/hoverable

I have some images on my site and I would like to know how to stop them from being able to be dragged, but so I can still click/hover on them.

This code does not work on Firefox and I am able to drag it:

img {
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

This makes it not clickable/hoverable:

img {
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-drag: none;
 }
Solution

  • Just add the draggable attribute in your img tag

    Here's an example:

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