Desactivar el arrastre de una imagen desde una página HTML

Necesito poner una imagen en mi página. Quiero desactivar 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.

Te puede gustar esto https://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page/

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

Verlo funcionando (o no trabajando, más bien)

Parece que estás usando jQuery.

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

Solución CSS única: use pointer-events: none

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

simplemente agregue draggable = “false” a su etiqueta de imagen:

  

IE8 y versiones anteriores no admiten sin embargo.

 window.ondragstart = function() { return false; } 
 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 utilicé en mi sitio web en http://www.namdevmatrimony.in/ ¡¡Funciona como una magia !!! 🙂

Me probé y descubrí que esto está funcionando.

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

Estoy seguro de que esto desactiva el arrastre de todas las imágenes. No estoy seguro de que tenga algún otro efecto.

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

  

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

Vea esta respuesta ; en Chrome y Safari puede usar el siguiente estilo para desactivar el arrastre predeterminado:

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

Podrías probar con user-select para Firefox e IE (10+):

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

Puede agregar lo siguiente a cada imagen que no desea que se pueda arrastrar, (dentro de la etiqueta img ):

 onmousedown="return false;" 

p.ej

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

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

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

Dado que mis imágenes se crearon 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 ajax creadas sin tener que hacer nada.

Con jQuery nuevo on enlace:

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

Utiliza directamente esto: ondragstart="return false;" en tu etiqueta de imagen.

  

Si tiene varias imágenes, envueltas en una etiqueta

:

 

Funciona en todos los principales navegadores.

Gran solución, tuvo un pequeño problema con los conflictos. Si alguien más tiene un conflicto con 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.

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

En su etiqueta agregue ondragstart="return false" . Esto desactivará el arrastre de imágenes. Pero si también desea desactivar la selección de texto, agregue onselectstart="return false" .

El código se verá así:

  

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 en las 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; }; } }; 
 document.getElementById('#yourImageId').addEventListener('dragstart', function(e) { e.preventDefault(); }); 

Funciona en este Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

Puede considerar mi solución la mejor. La mayoría de las respuestas no son compatibles con navegadores antiguos como IE8, ya que e.preventDefault () no será compatible, así como el evento ondragstart . Para hacerlo compatible con navegador cruzado, debe bloquear el evento mousemove para esta imagen. Vea el siguiente ejemplo:

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

Establezca las siguientes propiedades CSS para la imagen:

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

Robando de mi propia respuesta , simplemente 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 para los más antiguos.

Hice las propiedades de CSS que se muestran aquí, así como el control de ondragstart con el siguiente javascript:

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