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.


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

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


174

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

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


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.


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

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



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.


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

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

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

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.


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)


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=""/>

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.


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


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


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;

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


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.


1

Puede usar código en línea para esto

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

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

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


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


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

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.