Prevent drag and drop or image selection without using JS

Question

Does anyone know how 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 problem:

1) You can drag and select in Firefox:

<img src="..."> 

2) Thus, we add this, but the image can still be selected by dragging and dropping:

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

3) So we add this to fix the backlight problem, but then in contrast, the image is dragged again. Strange, I know! Using FF 16.0.1

 <img src="..." draggable="false" style="-moz-user-select: none;"> 

So, does anyone know why adding "-moz-user-select: none" can somehow outperform and disable "draggable = false"? Of course, webkit works as expected. There is nothing in Interwebs about this ... It would be great if we could shed light on this together.

Thank!!

Edit: This is due to the fact that the user interface elements are inadvertently dragged and usability is improved - and not some uncomfortable attempt to use the copy protection scheme :-)

Answer 1

Set the following CSS properties for the image:

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

Answer 2

I forgot to share my solution, I could not find a way to do this without using JS. In some cases, @Jeffery A Wooden suggested CSS not to cover.

This is what I apply to all of my user interface containers, there is no need to apply to each element, as it applies to all 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 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' ); }; 

It was much more difficult than necessary.

Answer 3

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

 img { pointer-events: none; } 

edited

this will block (click) the event. So the best 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; } 

Answer 4

Depending on the situation, it is often useful 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 JSFiddle for a live example with a button and another selection option.

Answer 5

You can probably just resort to

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

Answer 6

You can set the image as a background image. Since it is in the div and the div not available, the image will not be available:

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

Answer 7

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

window.ondragstart = function () {return false}

Note. This can help you add draggable = false for each img tag when you still need a click event (i.e. you cannot use pointer-events = none), but don't want the image of the drag icon to appear.

Answer 8

I created a div element that is the same size as the image and is located on top of the image . Then mouse events do not go to the image element.