Desativar arrastar uma imagem de uma página HTML

194

Eu preciso colocar uma imagem na minha página. Quero desativar o arrasto dessa imagem. Estou tentando muitas coisas, mas não ajuda. Alguém pode me ajudar?

Não quero manter essa imagem como imagem de fundo porque estou redimensionando a imagem.

— Usuário 1034
fonte

15

@AgentConundrum - Não há problema para mim se o usuário salvar e fizer o que quiser. Meu único requisito é não arrastar essa imagem.

— Página

261

Você pode gostar disso ...

document.getElementById('my-image').ondragstart = function() { return false; };

Veja-o funcionando (ou não funcionando)

Parece que você está usando jQuery.

$('img').on('dragstart', function(event) { event.preventDefault(); });

— alex
fonte

9

@alex - O objetivo de não ter a imagem arrastada não é roubar a imagem. O objetivo é completamente diferente. Estou tornando essa imagem classificável e descartável. Portanto, leva muito tempo para explicar.

— Usuário 1034

2

@alex - O ondragstart é independente do navegador?

— Usuário 1034

1

@AdamMerrifield Tente em $(document)vez de$(window)

— rybo111

2

Acabei de descobrir que você pode simplificar o jQuery para:$('img').on('dragstart', false);

— rybo111

2

@alex Sob manipulador:The value false is also allowed as a shorthand for a function that simply does return false.

— Adam Merrifield

174

Solução somente CSS: use pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

— mikhuang
fonte

3

Mas isso levou ao estranho efeito de seleção na FF pelo menos. Melhor ainda retornar falso;

— Bhumi Singhal

não é usado quando imagem como link.

— Nilesh patel

3

Parece que este não irá funcionar no IE (qualquer versão) veja: caniuse.com/pointer-events

— Justin Tanner

8

Também uma solução apenas para CSS : coloque um elemento sobre o img.

— alex

6

-1! Isso deve ser usado para impedir TODOS os eventos do ponter (incluindo arrastar sobre, como quando você deseja fazer upload de uma imagem). Use a solução javascript isntead!

— precisa saber é o seguinte

129

basta adicionar draggable = "false" à sua tag de imagem:

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

IE8 e abaixo não suporta no entanto.

— dmo
fonte

Estou usando o Magento para que minha div goste: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> Como posso restringir o clique com o botão direito e sem arrastar minha imagem div. @dmo

— Gem

41

window.ondragstart = function() { return false; }

— Ben
fonte

4

+1 Não entenda os votos negativos. Não é a solução definitiva, embora evite arrastar tudo, não apenas uma imagem especial. Mas mostra a direção certa (e acho que foi a primeira resposta)

— Dr.Molle 18/11/2010

@DrMolle Pode ter sido em resposta aos comentários (desde que excluídos) deixados por Steve na minha resposta .

— alex

2

Lembre-se de que, às vezes, as pessoas arrastam um link para a barra de favoritos - essa solução remove essa capacidade.

— perfil completo de jclark

33

solução mais simples entre navegadores é

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

Problema com

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

é que não está funcionando no firefox

— imal hasaranga perera
fonte

25

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

Eu usei no meu site em http://www.namdevmatrimony.in/ Funciona como uma mágica !!! :)

— Namdev Matrimony
fonte

6

É arrastável no Firefox

— Dean Christian Armada

24

Eu tentei e descobri que isso está funcionando.

$("img").mousedown(function(){
    return false;
});

Estou certo de que isso desabilita o arrastamento de todas as imagens. Não tenho certeza se isso afeta outra coisa.

— Usuário 1034
fonte

3

Ah! Você deveria ter mencionado que estava usando o jQuery / poderia usar o jQuery. +1 para usar o jQuery.

— Alex18:

@alex - me desculpe. Eu estava tentando sozinho. E não tenho certeza se isso afeta outra coisa.

— Página

você está bem! Não, até onde eu sei, fazer o que você tem aqui não deve ter efeitos negativos em mais nada.

— Alex #

2

E se a imagem estiver dentro de uma <a>tag? Então, se o usuário clicar na imagem, o link não será clicado.

— SeinopSys

Obrigado. Aliás, isso também funciona no GWT com um `event.preventDefault ();`.

— Johanna

14

Veja esta resposta ; no Chrome e Safari, você pode usar o seguinte estilo para desativar o arraste padrão:

-webkit-user-drag: auto | element | none;

Você pode tentar selecionar o usuário para Firefox e IE (10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

— mhu
fonte

11

Você pode adicionar o seguinte a cada imagem que não deseja arrastar (dentro da imgtag):

onmousedown="return false;"

por exemplo

img src="Koala.jpg" onmousedown="return false;"

— BOBO
fonte

10

Esse código faz exatamente o que você deseja. Impede que a imagem seja arrastada enquanto permite outras ações que dependem do evento.

$("img").mousedown(function(e){
    e.preventDefault()
});

— Robert
fonte

9

Use diretamente isso: ondragstart="return false;"na sua tag de imagem.

<img src="http://image-example.png" ondragstart="return false;"/>

Se você tiver várias imagens, agrupadas em uma <div>tag:

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

Funciona em todos os principais navegadores.

— Jan
fonte

8

Desde que minhas imagens foram criadas usando ajax e, portanto, não estão disponíveis no windows.load.

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

Dessa forma, eu posso controlar qual seção bloqueia o comportamento, ele usa apenas uma ligação de evento e funciona para futuras imagens criadas pelo ajax sem precisar fazer nada.

Com a nova onligação do jQuery :

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (obrigado @ialphan)

— guzart
fonte

1

Usando .on, será assim: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});

— Ialphan

Esta é a solução correta. Uma ligação de evento para imgelementos ilimitados , presente ou futuro. Menos intensivo, mais robusto.

— bearfriend

5

<img draggable="false" src="images/testimg1.jpg" alt=""/>

— Mustafa
fonte

4

Ótima solução, teve um pequeno problema com conflitos. Se alguém tiver conflito com outra biblioteca js, simplesmente não habilite conflitos como esse.

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

Espero que isso ajude alguém.

— Paulo
fonte

3

Bem, eu não sei se as respostas aqui ajudaram a todos ou não, mas aqui está um truque simples de CSS embutido que definitivamente ajudaria você a desativar o arrasto e a seleção de textos em uma página HTML.

Na sua <body>tag, adicione ondragstart="return false". Isso desativará o arrasto de imagens. Mas se você também quiser desativar a seleção de texto, adicione onselectstart="return false".

O código ficará assim: <body ondragstart="return false" onselectstart="return false">

— Abhisek Das
fonte

3

Você pode considerar minha solução a melhor. A maioria das respostas não é compatível com navegadores antigos como o IE8, pois o e.preventDefault () não será suportado, assim como o evento ondragstart . Para fazê-lo compatível com vários navegadores, é necessário bloquear o mouse evento para esta imagem. Veja o exemplo abaixo:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

sem jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

testado e trabalhado mesmo para o IE8

— CodeGems
fonte

3

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;

— Omid Farvid
fonte

1

Não parece trabalhar em Firefox (usando Mac Firefox 69)

— Ben Wheeler

2

Bem, isso é possível, e as outras respostas postadas são perfeitamente válidas, mas você pode adotar uma abordagem de força bruta e impedir o comportamento padrão de mousedown imagens. Qual é começar a arrastar a imagem.

Algo assim:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

— Alex
fonte

2

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

Funciona neste Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

— dtothefp
fonte

2

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

Você pode substituir o seletor de corpo por qualquer outro recipiente que as crianças que você deseja impedir sejam arrastadas e soltas.

— Lis
fonte

1

Você pode usar código embutido para isso

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

Expandir snippet

E a segunda opção é usar CSS externo ou na página

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

<img src="http://www.ourkanpur.com/images/logo.png">

Expandir snippet

Ambos estão funcionando corretamente Estou usando CSS externo neste site (clique aqui)

— Abhishek kamal
fonte

Nenhum destes parecem funcionar no Firefox (usando Mac Firefox 69)

— Ben Wheeler

1

A resposta é simples:

<body oncontextmenu="return false"/>- desativar o botão direito do mouse <body ondragstart="return false"/>- desativar o arraste do mouse <body ondrop="return false"/>- desativar o mouse

— Ganho
fonte

-1

Eu fiz as propriedades css mostradas aqui, além de monitorar o ondragstart com o seguinte javascript:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

— Alocus
fonte

-2

Roubando da minha própria resposta , basta adicionar um elemento completamente transparente do mesmo tamanho sobre a imagem. Ao redimensionar sua imagem, certifique-se de redimensionar o elemento.

Isso deve funcionar para a maioria dos navegadores, mesmo os mais antigos.

— Sablefoste
fonte