Desactivar arrastrar una imagen desde una página HTML

194

Necesito poner una imagen en mi página. Quiero deshabilitar el arrastre de esa imagen. Estoy intentando muchas cosas pero no ayuda. Alguien me puede ayudar ?

No quiero mantener esa imagen como imagen de fondo porque estoy cambiando el tamaño de la imagen.

javascript jquery html css image Usuario 1034
fuente
15
@AgentConundrum: no hay ningún problema para mí si el usuario guarda y hace lo que quiera. Mi único requisito es no arrastrar esa imagen.
Usuario 1034

Respuestas:

261

Te puede gustar esto ...

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

Véalo funcionar (o no funciona, más bien)

Parece que estás usando jQuery.

$('img').on('dragstart', function(event) { event.preventDefault(); });
alex
fuente
9
@alex: el propósito de no arrastrar imágenes no es robar la imagen. El propósito es completamente diferente. Estoy haciendo que esa imagen sea clasificable y descartable. Por lo tanto, lleva mucho tiempo explicarlo.
Usuario 1034
2
@alex - ¿Ondragstart es independiente del navegador?
Usuario 1034
1
@AdamMerrifield Pruebe en $(document)lugar de$(window)
rybo111
2
Me acabo de dar cuenta de que puedes simplificar jQuery para:$('img').on('dragstart', false);
rybo111
2
@alex Bajo controlador:The value false is also allowed as a shorthand for a function that simply does return false.
Adam Merrifield
174

Solución solo CSS: uso pointer-events: none

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

Mikhuang
fuente
3
Pero esto condujo al extraño efecto de selección en FF al menos. Mejor aún devuelve falso;
Bhumi Singhal
No se utiliza cuando la imagen como enlace.
Nilesh patel
3
Parece que esto no funcionará en IE (cualquier versión) ver: caniuse.com/pointer-events
Justin Tanner
8
También una solución única de CSS : coloque un elemento sobre el img.
alex
66
-1! Esto se debe usar para evitar TODOS los eventos de ponter (incluido el arrastre, como cuando desea cargar una imagen). Utilice la solución de JavaScript isntead!
Denys Vitali
129

simplemente agregue draggable = "false" a su etiqueta de imagen:

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

Sin embargo, IE8 y versiones anteriores no son compatibles.

dmo
fuente
Estoy usando Magento, así que mi div dice: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> ¿Cómo puedo restringir el clic derecho y no arrastrar? mi imagen div. @dmo
Gema
41 
window.ondragstart = function() { return false; }
Ben
fuente
44
+1 No entiendo los votos negativos. No es la solución definitiva, ya que evita arrastrar todo, no solo una imagen especial. Pero muestra la dirección correcta (y creo que fue la primera respuesta que lo hace)
Dr.Molle
@DrMolle Puede haber sido en respuesta a los comentarios (desde que se eliminó) que Steve dejó en mi respuesta .
alex
2
Recuerde que a veces las personas arrastran un enlace a su barra de marcadores; esta solución eliminaría esta capacidad.
jClark
33

la solución más simple de navegador cruzado es 

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

problema con

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

es que no funciona en firefox

imal hasaranga perera
fuente
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;
}

Lo usé en mi sitio web en http://www.namdevmatrimony.in/ ¡Funciona como una magia! :)

Matrimonio Namdev
fuente
66
Es arrastrable en Firefox
Dean Christian Armada
24

Lo intenté y descubrí que esto funciona.

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

Estoy seguro de que esto desactiva el arrastre de todas las imágenes. No estoy seguro de que afecte a otra cosa.

Usuario 1034
fuente
3
Ah! Debería haber mencionado que estaba usando jQuery / podría usar jQuery. +1 por usar jQuery.
Alex
@ Alex - Lo siento. Lo estaba intentando yo mismo. Y no estoy seguro de que afecte a otra cosa.
Usuario 1034
¡estás bien! No, que yo sepa, hacer lo que tienes aquí no debería tener ningún efecto negativo en nada más.
Alex
2
¿Qué pasa si la imagen está envuelta dentro de una <a>etiqueta? Luego, si el usuario hace clic en la imagen, no se hará clic en el enlace.
SeinopSys
Gracias. Por cierto, esto también funciona en GWT con un `event.preventDefault ();`.
Johanna
14

Ver esta respuesta ; en Chrome y Safari, puede usar el siguiente estilo para deshabilitar el arrastre predeterminado:

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

Puede intentar seleccionar el usuario para Firefox e IE (10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
mhu
fuente
11

Puede agregar lo siguiente a cada imagen que no desee arrastrar (dentro de la imgetiqueta):

onmousedown="return false;"

p.ej 

img src="Koala.jpg" onmousedown="return false;"
BOBO
fuente
10

Este código hace exactamente lo que quieres. Evita que la imagen se arrastre mientras permite otras acciones que dependen del evento.

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

Use esto directamente: ondragstart="return false;"en su etiqueta de imagen.

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

Si tiene varias imágenes, envueltas en una <div>etiqueta:

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

Funciona en todos los principales navegadores.

ene
fuente
8

Dado que mis imágenes fueron creadas usando ajax, y por lo tanto no están disponibles en windows.load.

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

De esta forma puedo controlar qué sección bloquea el comportamiento, solo usa un enlace de evento y funciona para futuras imágenes creadas con ajax sin tener que hacer nada.

Con jQuery nuevo onenlace:

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

Guzart
fuente
1
Usando .on será así: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});
ialphan
Esta es la solución correcta. Un evento vinculante para imgelementos ilimitados , presente o futuro. Menos intensivo, más robusto.
bearfriend
5 
<img draggable="false" src="images/testimg1.jpg" alt=""/>
Mustafa
fuente
4

Gran solución, tenía un pequeño problema con los conflictos. Si alguien más tiene un conflicto de otra biblioteca js, simplemente no habilite ningún conflicto como ese.

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

Espero que esto ayude a alguien.

Pablo
fuente
3

Bueno, no sé si las respuestas aquí han ayudado a todos o no, pero aquí hay un simple truco CSS en línea que definitivamente lo ayudará a deshabilitar el arrastre y la selección de textos en una página HTML.

En su <body>etiqueta agregar ondragstart="return false". Esto deshabilitará el arrastre de imágenes. Pero si también desea deshabilitar la selección de texto, agregueonselectstart="return false" .

El código se verá así: <body ondragstart="return false" onselectstart="return false">

Abhisek Das
fuente
3

Puedes considerar mi solución como la mejor. La mayoría de las respuestas no son compatibles con los navegadores antiguos como Internet Explorer 8 ya e.preventDefault () no será apoyado, así como ondragstart evento. Para hacerlo compatible con el navegador cruzado, debe bloquear el evento mousemove para esta imagen. Ver ejemplo a continuación:

jQuery

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

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

probado y trabajado incluso para IE8

CodeGems
fuente
3

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;
Omid Farvid
fuente
1
No parece funcionar en Firefox (usando Mac Firefox 69)
Ben Wheeler
2

Bueno, esto es posible, y las otras respuestas publicadas son perfectamente válidas, pero podría adoptar un enfoque de fuerza bruta y evitar el comportamiento predeterminado de mousedown imágenes. Lo cual, es comenzar a arrastrar la imagen.

Algo como esto:

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

jQuery:

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

Puede reemplazar el selector de cuerpo con cualquier otro contenedor que los niños que desea evitar sean arrastrados y soltados.

Lis
fuente
1

Puede usar código en línea para esto

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

Y la segunda opción es usar CSS externo o en la 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 fragmento

Ambos funcionan correctamente Estoy usando CSS externo en este sitio (Haga clic aquí)

Abhishek kamal
fuente
Ninguno de estos parece funcionar en Firefox (usando Mac Firefox 69)
Ben Wheeler
1

La respuesta es simple:

<body oncontextmenu="return false"/>- deshabilitar el clic derecho <body ondragstart="return false"/>- deshabilitar el arrastre del mouse <body ondrop="return false"/>- deshabilitar la caída del mouse

Ganancia
fuente
-1

Hice las propiedades css que se muestran aquí, así como supervisé ondragstart con el siguiente javascript:

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

Robando de mi propia respuesta , solo agregue un elemento completamente transparente del mismo tamaño sobre la imagen. Cuando cambie el tamaño de su imagen, asegúrese de cambiar el tamaño del elemento.

Esto debería funcionar para la mayoría de los navegadores, incluso los más antiguos.

Sablefoste
fuente