'Apply draggable="false" to all images at once with CSS

In order to prevent from users dragging images on my website, it seems I have to do like this : <img draggable="false" src="../example.jpg" style="width:100%">.

But I have a bunch of images to apply to, so I wonder if there is a way to apply it for all images in CSS.

cssdraggable


Solution 1:[1]

You can do it with this CSS:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Solution 2:[2]

You cant do this with css. But you can do it via JS (jQuery in this example)

$('img').attr('draggable', false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">

Solution 3:[3]

Changing behavior & interactivity of elements is not really what CSS is supposed to be for (it's for handling layout & appearance).

You can set user-drag and user-select (and browser variations) CSS properties on all images, or you can use CSS selectors to access & manipulate a group of elements with a given class or ID, instead of directly targeting every element of that type. Since you don't seem to have any CSS classes on your images, you have to target the img element, which currently would affect every image on the page.

You could do this with basic JavaScript (see snippet) or jQuery: 

$('img').attr('draggable', false);

If, for example, you later want to make only a certain group/type of images draggable, you could apply a CSS class to them and use it to target only images with that class instead of changing the properties of every img element. 

//get all images & make them all non-draggable
var allImages = document.getElementsByTagName("img");
    for (element of allImages) { 
        element.draggable = false;
        //console.log(element.draggable);
    }
    
//make only images w/the appropriate CSS class draggable again    
var draggableImages = document.getElementsByClassName("draggableImage");
    for (element of draggableImages) { 
        element.draggable = true;
        //console.log(element.draggable);
    }
img {
  width: 60%;
}

.draggableImage {
   /*Whatever styles you might want to apply to a draggable image  */
}
<img draggable="true" src="http://via.placeholder.com/300x20"></img>

<img draggable="true" src="http://via.placeholder.com/300x20"></img>

<img class="draggableImage" draggable="true" src="http://via.placeholder.com/300x20"></img>

<img class="draggableImage" draggable="true" src="http://via.placeholder.com/300x20"></img>

Solution 4:[4]

Is there a way to apply it for all images in CSS?

No, there is no cross browser way to do it with CSS only.

There's -webkit-user-drag, but it won't work in Firefox.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ivan Bisultanov
Solution 2 SirPilan
Solution 3 mc01
Solution 4 Marcio Duarte

Related Questions