Desactivar arrastrar una imagen desde una página HTML

Necesito para poner una imagen en mi página. Quiero desactivar arrastrar de esa imagen. Estoy tratando de muchas cosas, pero no hay ayuda. Puede alguien ayudarme ?

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

  • No hay ningún problema para mí si el usuario guarda y hace lo que quiere. Mi único requisito es no arrastrar la imagen.
InformationsquelleAutor User 1034 | 2010-11-18

24 Kommentare

  1. 259

    Que le puede gustar esto…

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

    A ver cómo funciona (o no funciona, en lugar)

    Parece que estás usando jQuery.

    $('img').on('dragstart', function(event) { event.preventDefault(); });
    • El propósito de no tener imagen arrastrando no es el robo de la imagen. El propósito es completamente diferente. Estoy haciendo la imagen como que se puede ordenar y lanzables. Así que toma un largo tiempo para explicarlo.
    • Es ondragstart es independiente del navegador ?
    • Parece ser, excepto por el < Firefox 3.5
    • Usted también compañero lo siento. Los comentarios se convirtió en irrelevante después de la vorágine de las ediciones y después resultó que mi respuesta no había sido estafado.
    • Funciona perfectamente en Chrome 35 (en Ubuntu 13.04).
    • A mi me funciona en Chrome 37 para windows. Prueba: jsfiddle.net/g338ykLg
    • Este método NO funciona con jQuery delegación jsfiddle.net/g338ykLg/2
    • Trate de $(document) en lugar de $(window)
    • Yo sólo funcionó usted puede simplificar el jQuery para: $('img').on('dragstart', false);
    • Tal vez usted podría, pero me gustaría evitar como a) AFAIK no es documentado por jQuery y b) confuso a lo que en realidad podría estar haciendo.
    • En virtud de controlador: The value false is also allowed as a shorthand for a function that simply does return false.
    • Así hay que ir. Una cosa a tener en cuenta es evitar la propagación demasiado, lo que podría ser un problema.

  2. 154

    CSS única solución: utilizar pointer-events: none

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

    • Pero esto lleva a la extraña selección de efecto en FF atleast. Mejor aún return false;
    • no se utiliza cuando la imagen como enlace.
    • Parece que esto no funcionará en internet explorer (cualquier versión), véase: caniuse.com/pointer-events
    • También un CSS solo solución: colocar un elemento más el img.
    • No, no lo es! Algunos de nosotros todavía necesitamos el apoyo IE9 y peor.
    • Jeje, gotcha @Lego. Maldición mayores IE! 🙂
    • Esto obliga a que el tipo de cursor a cursor: default :'(
    • -1 ! Este debe ser usado para prevenir TODOS los moveing ponter eventos (incluyendo arrastrando, al igual que cuando quieres subir una imagen). El uso de javascript solución isntead!
    • Parece que funciona en IE11.
    • Para mi problema (que yo quería ningún tipo de interacción en un div) esto funcionó para los navegadores modernos
    • Esto evita que cualquier interacción, no sólo arrastrar y soltar

  3. 116

    acaba de agregar draggable=»false» a la imagen de la etiqueta:

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

    IE8 y en virtud de no apoyar sin embargo.

    • Funciona en Chrome
    • No funciona en firefox 33.0 ubuntu.
    • No funciona en Firefox 43 ya sea
    • Estoy usando Magento para mi div como : <div class=»producto-img-box»> <?php echo $this->getChildHtml («medios») ? > </div> ¿Cómo puedo restringir clic derecho y sin la posibilidad de arrastrar mi imagen div. @dmo
  4. 41
    window.ondragstart = function() { return false; } 
    • +1 no entienden los downvotes. No es la mejor solución, mientras que se evita el arrastre de todos, no sólo una imagen especial. Pero muestra la dirección correcta(y creo que fue la primera respuesta que hace)
    • Es posible que haya sido en respuesta a la (ya eliminado) los comentarios de Steve en mi respuesta.
    • Recuerda que a veces la gente va a arrastrar un enlace a la barra de marcadores — esta solución sería eliminar esta posibilidad.
  5. 29

    más simple navegador cruz solución 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

  6. 24

    He probado a mí mismo y encontré este es trabajo.

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

    Estoy seguro de que esto deshabilita el arrastre de todas las imágenes. No está seguro de que los efectos de algo más.

    • Ah! Usted debería haber mencionado que estaban usando jQuery/podría usar jQuery. +1 para el uso de jQuery.
    • Lo siento. Yo estaba tratando de que mi auto. Y no estoy seguro de que los efectos de algo más.
    • está bien! No, que yo sepa, haciendo lo que tenemos aquí no debería tener efectos negativos sobre cualquier otra cosa.
    • ¿Y si la imagen se ajusta dentro de un <a> etiqueta? A continuación, si el usuario hace clic en la imagen, el enlace no se ha hecho clic.
    • Gracias. Por cierto, esto también funciona en GWT con un ` evento.preventDefault();`.
    • $('img').mousedown(false) más corto. Y @SeinopSys Qué navegador estás usando? Todavía funciona, al menos para mí (FF v59.0.2). No prueba con otros navegadores, pero aunque aquí un el violín para la prueba.

  7. 13

    Ver este respuesta; en Chrome y Safari puede utilizar el siguiente estilo para deshabilitar el defecto de arrastre:

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

    Usted podría tratar de el usuario seleccione para Firefox y IE(10+):

    -moz-user-select: none | text | all | element
    -ms-user-select: none | text | all | element
  8. 11

    Puede agregar lo siguiente para cada imagen, usted no quiere ser arrastrables, (dentro de la img etiqueta):

    onmousedown="return false;"

    por ejemplo,

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

    Este código hace exactamente lo que usted desea. Evita que la imagen de arrastrar mientras permitiendo que cualquier otra de las acciones que dependen del evento.

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

    Utilizar directamente esta: ondragstart="return false;" en su etiqueta de imagen.

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

    Si tienes varias imágenes, envuelto en un <div> etiqueta:

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

    Funciona en todos los principales navegadores.

  11. 8

    Desde mis imágenes fueron creadas usando ajax, y por lo tanto no está disponible en windows.de carga.

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

    De esta manera puedo controlar que la sección de los bloques de la conducta, sólo utiliza uno de los eventos de enlace y funciona para el futuro ajax de imágenes creadas sin tener que hacer nada.

    Con jQuery nuevo on encuadernación:

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

    • El uso de .va a ser como esto: $(document).en(‘dragstart’,’img’,function(e){e.preventDefault();});
    • Esta es la solución correcta. Uno de los eventos de unión para un número ilimitado de img elementos, el presente o el futuro. Menos intensivo, más robusto.
  12. 4

    Gran solución, había un pequeño problema con los conflictos,
    Si alguien tiene conflicto de otros js biblioteca de simplemente permitir ningún conflicto como tal.

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

    Espero que esto ayude a alguien.

  13. 3

    Bueno, yo no sé si las respuestas aquí han ayudado a todo el mundo o no, pero aquí es un simple CSS en línea truco que definitivamente le ayudará a desactivar arrastrar y seleccionar textos en una página HTML.

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

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

  14. 3

    Puede considerar mi solución es la mejor. La mayoría de las respuestas no son compatibles con los navegadores antiguos como internet explorer 8 desde e.preventDefault() no ser compatibles, así como ondragstart evento. Para hacerlo compatible con todos los navegadores hay que bloquear mousemove evento para esta imagen. Véase 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 para IE8

  15. 3

    Establezca las siguientes propiedades CSS a la imagen:

    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    • Parece que no funcionan en Firefox (usando Mac Firefox 69)
  16. 2

    Bien, esto es posible, y las otras respuestas publicadas son perfectamente válidos, pero usted podría tomar una aproximación de fuerza bruta y evitar el comportamiento por defecto de mousedown en las imágenes. Que, es de empezar 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; };
        }  
    };  
  17. 1

    jQuery:

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

    Puede reemplazar el cuerpo selector con cualquier otro recipiente que los niños se desea evitar ser arrastrados y soltados.

  18. 0

    Respuesta es simple:

    <body oncontextmenu="return false"/> – deshabilitar el clic derecho
    <body ondragstart="return false"/> – desactivar arrastrar con el mouse
    <body ondrop="return false"/> – deshabilitar el ratón gota

  19. -1

    Hice las propiedades de css que se muestra aquí, así como vigilar la ondragstart con el siguiente javascript:

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

    El robo de mi propia respuesta, sólo tiene que añadir una completamente transparente elemento del mismo tamaño sobre la imagen. Cuando el tamaño de la 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 viejos.

  21. -2

    Puede utilizar código en línea para este

    HTML:

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

    Y la segunda opción es de uso externo o en la página de css

    CSS:

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

    HTML:

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

    Ambos están Trabajando Correctamente
    I m usando css externo en este sitio (Haga Clic Aquí)

    • Ninguno de estos parece funcionar en Firefox (usando Mac Firefox 69)

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein