html - ejemplos - Evitar que una imagen sea arrastrable o seleccionable sin usar JS

draggable js

Question

¿Alguien sabe de una manera de hacer que una imagen no sea arrastrable y no se pueda seleccionar, al mismo tiempo, en Firefox, sin recurrir a Javascript? Parece trivial, pero aquí está el problema:

1) Se puede arrastrar y resaltar en Firefox:

<img src="...">

2) Así que agregamos esto, pero la imagen aún se puede resaltar mientras se arrastra:

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

3) Así que agregamos esto, para corregir el problema de resaltado, pero luego, en contra de la intuición , la imagen se puede volver a arrastrar. ¡Extraño, lo sé! Usando FF 16.0.1

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

Entonces, ¿alguien sabe por qué agregar "-moz-user-select: none", de alguna manera prevalecería y desactivaría "draggable = false"? Por supuesto, webkit funciona como se esperaba. No hay nada en los Interwebs sobre esto ... Sería genial si pudiéramos sacar algo de luz sobre esto juntos.

¡¡Gracias!!

Editar: se trata de evitar el arrastre inadvertido de los elementos de la interfaz de usuario y mejorar la usabilidad, no un intento fallido de un esquema de protección contra copia :-)

Answer 1

Dependiendo de la situación, a menudo es útil hacer que la imagen sea una imagen de fondo de un div con CSS.

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

Luego en CSS:

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

Vea este JSFiddle para un ejemplo en vivo con un botón y una opción de tamaño diferente.

Answer 2

Establezca las siguientes propiedades CSS para la imagen:

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

Answer 3

Me he olvidado de compartir mi solución, no pude encontrar una manera de hacerlo sin usar JS. Hay algunos casos de esquina donde el CSS sugerido de @Jeffery A Wooden simplemente no cubrirá.

Esto es lo que aplico a todos mis contenedores de UI, no es necesario aplicarlo a cada elemento, ya que se aplica a todos los elementos secundarios.

.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;
}

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'' ); 
};

Esto era mucho más complicado de lo necesario.

Answer 4

Probablemente podrías simplemente recurrir a

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

Answer 5

Puede establecer la imagen como una imagen de fondo. Como reside en un div y el div es indivisible, la imagen será indivisible:

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

Answer 6

Puede usar la propiedad de pointer-events en su CSS y establecerla igual a ''ninguno''

img {
    pointer-events: none;
}

Editado

esto bloqueará el evento (clic). Entonces, una mejor solución sería

<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 7

Una solución genérica especialmente para el navegador Windows Edge (ya que la regla CSS -ms-user-select: none no funciona):

window.ondragstart = function () {return false}

Nota: Esto puede ahorrarle tener que agregar draggable = false a cada etiqueta img cuando aún necesita el evento click (es decir, no puede usar pointer-events = none), pero no desea que aparezca la imagen del icono de arrastre.