Impedindo que uma imagem seja arrastável ou selecionável sem usar JS


132

Alguém sabe como fazer uma imagem não arrastável e não selecionável - ao mesmo tempo - no Firefox, sem recorrer ao Javascript? Parece trivial, mas aqui está o problema:

1) Pode ser arrastado e destacado no Firefox:

<img src="...">

2) Adicionamos isso, mas a imagem ainda pode ser destacada enquanto arrasta:

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

3) Então, adicionamos isso, para corrigir o problema de destaque, mas, de maneira contrária, a imagem se torna arrastável novamente. Estranho, eu sei! Usando o FF 16.0.1

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

Então, alguém sabe por que adicionar "-moz-user-select: none" de alguma forma superaria e desativaria "draggable = false"? Obviamente, o webkit funciona como esperado. Não há nada nas Interwebs sobre isso ... Seria ótimo se pudéssemos esclarecer isso juntos.

Obrigado!!

Editar: trata-se de impedir que os elementos da interface do usuário sejam arrastados inadvertidamente e de melhorar a usabilidade - não uma tentativa fraca de um esquema de proteção contra cópia :-)


1
Espero que você não pense que isso impedirá as pessoas de salvar sua imagem em disco. Qualquer pessoa com um pouco de entendimento de como os navegadores funcionam poderá contornar isso com facilidade.
Jim Garrison

@ JimGarrison, claro que não, desculpe, eu deveria ter sido mais específico, estou tentando impedir que alguns dos meus elementos da interface do usuário sejam movidos, no contexto certo, isso está prejudicando a usabilidade.
tmkly3

Muito útil se você tiver elementos de plano de fundo que serão arrastados na área de trabalho (ou pior, como linhas de código href em algum arquivo aberto em segundo plano atrás da janela do navegador enquanto estiver trabalhando nele!) Quando estiverem perto das barras de rolagem modernas muito pequenas e você não bata na barra exatamente sempre que testar os pergaminhos.
Garavani

1
Este tem sido um problema conhecido no Firefox para um tempo muito longo , como se vê ( duplicado? )
Coderer

Respostas:


210

Defina as seguintes propriedades CSS para a imagem:

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

3
Obrigado, eu os tenho também, mas o problema está começando a parecer um bug no Firefox. Eu acho que a única maneira de resolver isso por enquanto é através do Javascript.
tmkly3

Trabalhou em todos os navegadores.
Milad Abooali

Tudo bem, então como faço para não mostrar nenhum efeito, mas ainda acionar o evento de arrastar?
Ty_

6
Eu descobri que ainda podia arrastar no Firefox 47, mas adicionando ondragstart = "return false" da Masadow; a propriedade da tag da imagem a corrigiu.
586166 # javascript #

3
Eu ainda pode arrastar em cromo
lonewarrior556

54

Eu esqueci de compartilhar minha solução, não consegui encontrar uma maneira de fazer isso sem usar o JS. Existem alguns casos em que o CSS sugerido pelo @Jeffery A Wooden simplesmente não cobre.

É isso que aplico a todos os meus contêineres da interface do usuário, sem necessidade de aplicar a cada elemento, pois ele recusa em todos os elementos filho.

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

Isso foi muito mais complicado do que precisava ser.


1
$ (el) .on ('dragstart', function (e) {e.preventDefault ();});
Pete B

3
Também poderia ser escrito <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">para corresponder ao código do OP.
Masadow

38

Você pode usar a pointer-eventspropriedade em seu CSS e defini-la como 'none'

img {
    pointer-events: none;
}

Editado

isso irá bloquear (clique) evento. Então, uma solução melhor seria

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

1
Fazer dessa maneira faz com que um ícone de imagem se comporte mais como um glifo, então eu gosto mais desse método.
Funkodebat

9
Isso também torna eventos como (onclick) inutilizáveis. Tenha cuidado se você usar essa abordagem.
Nicolas Bouvrette

Esta resposta ainda é válida enquanto a resposta aceita não estiver nas versões mais recentes do software. Essa deve ser a nova resposta aceita. @ tmkly3
progyammer 12/01

isso criará um problema se tivermos um evento de clique para a imagem. Ele irá bloquear o evento click
Pratap AK

12

Dependendo da situação, geralmente é útil tornar a imagem uma imagem de segundo plano de um divcom CSS.

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

Em seguida, em CSS:

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

Veja este JSFiddle para um exemplo ao vivo com um botão e uma opção de dimensionamento diferente.


9

Você provavelmente poderia apenas recorrer a

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

Esta deve ser a resposta aceita, o arrasto do usuário não é suportado pelo firefox. Obrigado por isso!
Merritt6616

Para mim também, "ponteiro-eventos" era a solução porque funcionou cross-browser ( "user-drag" não tem efeito sobre o Firefox, pelo menos em 11,2018)
David Dal Busco

2

Uma solução genérica especialmente para o navegador Windows Edge (como a regra -ms-user-select: none; a regra CSS não funciona):

window.ondragstart = function() {return false}

Nota: Isso pode poupar a necessidade de adicionar draggable="false"a cada imgtag quando você ainda precisa do evento click (ou seja, não pode usá-lo pointer-events: none), mas não deseja que a imagem do ícone de arrastar apareça.


A única resposta que realmente funciona para mim! Não sei por que não foi votado mais alto.
AldaronLau 23/06/19

1

Você pode definir a imagem como imagem de fundo. Como reside em a dive divé irreconhecível, a imagem ficará irreconhecível:

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

1

Criei um elemento div que tem o mesmo tamanho da imagem e está posicionado na parte superior da imagem . Em seguida, os eventos do mouse não vão para o elemento de imagem.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.