Evitar que una imagen sea arrastrable o seleccionable sin usar JS

132

¿Alguien sabe de una manera de hacer que una imagen no sea arrastrable y no seleccionable, al mismo tiempo, en Firefox, sin recurrir a Javascript? Parece trivial, pero este es el problema:

1) Se puede arrastrar y resaltar en Firefox:

<img src="...">

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

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

3) Entonces agregamos esto, para solucionar el problema de resaltado, pero luego, de forma contradictoria, la imagen se vuelve arrastrable nuevamente. 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 triunfaría y deshabilitaría "draggable = false"? Por supuesto, webkit funciona como se esperaba. No hay nada en Interwebs sobre esto ... Sería genial si pudiéramos arrojar algo de luz sobre esto juntos.

¡¡Gracias!!

Editar: se trata de evitar que los elementos de la interfaz de usuario sean arrastrados inadvertidamente y mejorar la usabilidad, no un intento poco convincente de un esquema de protección de copia :-)

tmkly3
fuente
1
Espero que no pienses que esto evitará que la gente guarde tu imagen en el disco. Cualquiera que tenga un ligero conocimiento de cómo funcionan los navegadores podrá solucionarlo fácilmente.
Jim Garrison
@JimGarrison, por supuesto que no, lo siento, debería haber sido más específico, estoy tratando de evitar que se muevan algunos de mis elementos de la interfaz de usuario, en el contexto correcto está perjudicando la usabilidad.
tmkly3
En cambio, es muy útil si tiene elementos de fondo que se arrastrarán en el escritorio (o peor, como líneas de código href en algún archivo abierto en segundo plano detrás de la ventana del navegador mientras trabaja en él) cuando están cerca de las barras de desplazamiento modernas muy pequeñas y usted no golpee la barra exactamente cada vez que pruebe los pergaminos.
Garavani
1
Este ha sido un problema conocido en Firefox durante mucho tiempo, ya que resulta ( ¿duplicado? )
Coderer

Respuestas:

210

Establezca las siguientes propiedades CSS en la imagen:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
Jeff Wooden
fuente
3
Gracias, también los tengo en su lugar, pero el problema comienza a parecerse a un error en Firefox. Supongo que la única forma de resolver esto por ahora es a través de Javascript.
tmkly3
Funcionó en todos los navegadores.
Milad Abooali
Muy bien, entonces, ¿cómo hago para que no muestre ningún efecto, pero sigo activando el evento de arrastre?
Ty_
66
Descubrí que aún podía arrastrar en Firefox 47, pero agregué ondragstart = "return false de Masadow"; propiedad de la etiqueta de imagen lo arregló.
andrew pate
3
Todavía puedo arrastrar en cromo
lonewarrior556
54

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

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

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

Esto fue mucho más complicado de lo necesario.

tmkly3
fuente
1
$ (el) .on ('dragstart', función (e) {e.preventDefault ();});
Pete B
3
También podría escribirse <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">para que coincida con el código de OP.
Masadow
38

Puede usar la pointer-eventspropiedad en su CSS y establecerla igual a 'none'

img {
    pointer-events: none;
}

Editado

esto bloqueará (haga clic) evento. Entonces, la 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;
}
Presa Linh
fuente
1
Hacerlo de esta manera hace que un icono de imagen se comporte más como un glifo, así que me gusta más este método.
Funkodebat
9
Esto también hace que eventos como (onclick) sean inutilizables ... tenga cuidado si utiliza este enfoque.
Nicolas Bouvrette
Esta respuesta sigue siendo válida mientras que la respuesta aceptada no está en las últimas versiones de software. Esta debería ser la nueva respuesta aceptada. @ tmkly3
progyammer
Esto creará un problema si tenemos un evento de clic para la imagen. Bloqueará el evento de clic
Pratap AK
12

Dependiendo de la situación, a menudo es útil hacer que la imagen sea una imagen de fondo de a divcon 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 ver un ejemplo en vivo con un botón y una opción de tamaño diferente.

Nick Merrill
fuente
9

Probablemente podrías recurrir a

<img src="..." style="pointer-events: none;">
Thomas Bachem
fuente
Esta debería ser la respuesta aceptada, el arrastre del usuario no es compatible con Firefox. ¡Gracias por esto!
Merritt6616
Para mí también, "eventos de puntero" fue la solución porque funcionaba entre navegadores ("arrastrar por el usuario" no tiene ningún efecto en Firefox, al menos en 11.2018)
David Dal Busco
2

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

window.ondragstart = function() {return false}

Nota: Esto puede ahorrarle tener que agregar draggable="false"a cada imgetiqueta cuando todavía necesita el evento de clic (es decir, no puede usar pointer-events: none), pero no desea que aparezca la imagen del icono de arrastre.

Philip Murphy
fuente
¡La única respuesta que realmente funciona para mí! No sé por qué no se votó más alto.
AldaronLau
1

Puede configurar la imagen como imagen de fondo. Dado que reside en a div, y no dives arrastrable, la imagen no será arrastrable:

<div style="background-image: url("image.jpg");">
</div>
joshua pogi 28
fuente
1

Creé un elemento div que tiene el mismo tamaño que la imagen y se coloca en la parte superior de la imagen . Luego, los eventos del mouse no van al elemento de imagen.

Usuario
fuente