Preventing an image from being draggable or selectable without using JS

Question

Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox, without resorting to Javascript? Seems trivial, but here's the issue:

1. Can be dragged and highlighted in Firefox:

2. So we add this, but image can still be highlighted while dragging:

3. So we add this, to fix the highlighting issue, but then counterintuitively, the image become draggable again. Weird, I know! Using FF 16.0.1

So, does anyone know why adding -moz-user-select: none, would somehow trump and disable draggable=false? Of course, webkit works as expected. Nothing is out there on the Interwebs about this...It would be great if we could shine some light on this together.

Edit: This is about keeping UI elements from being inadvertently dragged and improving usability - not some lame attempt at a copy protection scheme.

Arceliaarceneaux

@JimGarrison of course not, sorry I should have been more specific, I'm trying to keep some of my UI elements from getting moved about, in the right context it's harming usability. – Arceliaarceneaux

Very useful instead if you have background elements that will be dragged on desktop (or worse as href code lines into some file open in background behind the browser window while working on it!) when they are close to the very small modern scroll bars and you do not hit the bar exactly each time testing the scrolls. – Menderes

This has been a known issue in Firefox for a really long time as it turns out (duplicate?) – Intercalation

Answer 1

Set the following CSS properties to the image:

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

Bedew

Thanks, I have those in-place as well, but the issue is starting to look like a bug in Firefox. I guess the only way to solve this for now is through Javascript. – Arceliaarceneaux

Worked on all browsers. – Pember

Alright so how do I make it show no effect but still fire the drag event? – Dunkle

@EW-CodeMonkey - Is this what you're looking for? #17055544 – Bedew

I found I could still drag on Firefox 47 but adding Masadow's ondragstart="return false;" property to the image tag fixed it. – Thereunder

@andrewpate, if you are going to use something other than CSS, then use the draggable attribute/property. It is, after all, what the HTML Spec defines as what controls if an element is draggable. (e.g. HTML: draggable="false" JS: element.setAttribute('draggable',false);, or element.draggable = false;) – Swingle

I can still drag in chrome – Impala

user-drag only works in Safari. if you add draggable="false" to the image tag, it will stop being draggable. – Talos

I left a comment on the question, but in it probably bears repeating here: known issue, no apparent movement. – Intercalation

When I set user-select: none the user-drag: none properties do not work... Chrome 80 – Propagation

You should add a sample where this actually works. I tried in FF and it doesn't. Maybe it does work in some browsers? – Wideranging

By 2023, according to caniuse.com, this method has only 37% browsers coverage. – Heptagon

Answer 2

You can use the pointer-events property in your CSS, and set it equal to 'none'

img {
    pointer-events: none;
}

Edited

this will block (click) event. So better solution would be

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Trunks

Doing it this way makes an image icon behave more like a glyphicon, so I like this method best. – Irrecusable

This also make events like (onclick) unusable.. be careful if you use this approach. – Dantedanton

This answer is still valid while the accepted answer isn't on the latest software versions. This should be the new accepted answer. @Arceliaarceneaux – Frei

this will create problem if we have click event for the image. It will block the click event – Lefton

two answer is not better than, especially one of the answer is also the answer of other person. – Cowey

Answer 3

I've been forgetting to share my solution, I couldn't find a way to do this without using JS. There are some corner cases where @Jeffery A Wooden's suggested CSS just wont cover.

This is what I apply to all of my UI containers, no need to apply to each element since it recuses on all the child elements.

CSS:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

JS:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

This was way more complicated than it needed to be.

Arceliaarceneaux

$(el).on('dragstart', function (e) {e.preventDefault();}); – Trisoctahedron

It could also be written as <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;"> to match OP's code. – Jess

Answer 4

You could probably just resort to

<img src="..." style="pointer-events: none;">

Citadel

This should be the accepted answer, user drag is not supported by firefox. Thank you for this! – Bessel

For me too, "pointer-events" was the solution because it worked cross-browser ("user-drag" has no effect on Firefox, at least in 11.2018) – Sparks

Beware that setting pointer-events to none also turns off ALL POINTER EVENTS, such as onclick, onmouseenter, etc. for JavaScript. See this answer: https://mcmap.net/q/127999/-preventing-an-image-from-being-draggable-or-selectable-without-using-js – Epigone

Answer 5

Depending on the situation, it is often helpful to make the image a background image of a div with CSS.

<div id='my-image'></div>

Then in CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

See this JSFiddle for a live example with a button and a different sizing option.

Oligocene

Answer 6

A generic solution especially for Windows Edge browser (as the -ms-user-select: none; CSS rule doesn't work):

window.ondragstart = function() {return false}

Note: This can save you having to add draggable="false" to every img tag when you still need the click event (i.e. you can't use pointer-events: none), but don't want the drag icon image to appear.

Arresting

The only answer that actually works for me! Don't know why it's not voted higher. – Propinquity

Answer 7

Here's a four-part solution that should work in nearly every modern browser:

<img src="foobar.jpg" draggable="false" ondragstart="return false;">

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

You can remove the bottom four lines of CSS if you want to allow selecting/highlighting.

Parkin

This answer is a consolidated version of several other answers, all of which were helpful but none of which had been combined into a single convenient answer yet. – Parkin

This will not currently work in Firefox, as -moz-user-select: none prevents draggable="false" from working. See bugzilla.mozilla.org/show_bug.cgi?id=1376369 – Sangfroid

Answer 8

I created a div element which has the same size as the image and is positioned on top of the image. Then, the mouse events do not go to the image element.

Yvette

Answer 9

You could set the image as a background image. Since it resides in a div, and the div is undraggable, the image will be undraggable:

<div style="background-image: url("image.jpg");">
</div>

Pigweed

Answer 10

You should simply add the draggable attribute to your img tag.

<img src="myimage.png" draggable="false">

Benniebenning

Answer 11

I found this fix for my projects...

I made a class with below CSS Code:

.undraggable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

Then use this class for whatever image you want to make undruggable or unselectable. Using this class in a container also makes all images inside that container undruggable or unselectable.

let me know how it works for you guys...

Decomposition

Answer 12

Just short trick worked for me if you are using overlay box on it use the z-index property

Piperpiperaceous

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Judsonjudus