attribute - preload javascript

CSS/JS para evitar el arrastre de la imagen fantasma?

Question

¿Hay alguna manera de evitar que el usuario vea un fantasma de la imagen que intentan arrastrar (sin preocuparse por la seguridad de las imágenes, sino por la experiencia).

Intenté esto, que corrige el problema con la selección azul en el texto y las imágenes pero no en la imagen fantasma:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(También intenté anidar la imagen dentro de un div con las mismas reglas aplicadas al div). Gracias

Answer 1

Aquí hay una solución mucho más fácil que agregar oyentes de eventos vacíos. Simplemente configure pointer-events: none en su imagen. Si aún necesita que se pueda hacer clic en él, agregue un contenedor a su alrededor que desencadene el evento.

Answer 2

Coloque la imagen como fondo de un div vacío, o debajo de un elemento transparente. Cuando el usuario hace clic en la imagen para arrastrar, está haciendo clic en un div.

Ver http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

Answer 3

Creo que puedes cambiar tu

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

en un

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Answer 4

Encontré que para IE, debe agregar el atributo draggable = "false" a las imágenes y anclajes para evitar el arrastre. las opciones de CSS funcionan para todos los demás navegadores. Hice esto en jQuery:

$("a").attr(''draggable'', false); 
$("img").attr(''draggable'', false);

Answer 5

Esto desactivará el arrastre de una imagen en todos los navegadores , mientras se conservan otros eventos como hacer clic y desplazarse. Funciona siempre que haya HTML5, JS o CSS disponibles.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

Si está seguro de que el usuario tendrá JS, solo necesita usar el atributo JS, etc. Para obtener más flexibilidad, mire en ondragstart, onselectstart y algunos WebKit toque / toque CSS.

Answer 6

Intentalo:

img{pointer-events: none;}

y tratar de evitar

*{pointer-events: none;}

Answer 7

Maneje el evento dragstart y return false .

Answer 8

Para Firefox necesitas profundizar un poco más con esto:

var imgs = document.getElementsByTagName(''img'');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

Disfrutar.

Answer 9

Probado en Firefox: ¡eliminar y volver a poner la imagen funciona! Y es transparente en la ejecución, también. Por ejemplo,

$(''.imageContainerClass'').mousedown(function() {
    var id = $(this).attr(''id'');
    $(''#''+id).remove();
    $(''#''+id).append(''Image tag code'');
});

EDITAR : Esto funciona solo en IE y en Firefox, extrañamente. También agregué draggable = false en cada imagen. Sigue siendo un fantasma con Chrome y Safari.

EDIT 2 : La solución de imagen de fondo es realmente la mejor. ¡La única sutileza es que la propiedad de background-size debe redefinirse cada vez que se cambia la imagen de fondo! O eso, eso es lo que parecía de mi lado. Mejor aún, tuve un problema con las etiquetas normales de img en IE, donde IE no pudo cambiar el tamaño de las imágenes. Ahora, las imágenes tienen las dimensiones correctas. Sencillo:

$(id).css( ''background-image'', url(''blah.png'') );
$(id).css( ''background-size'', ''40px'');

Además, tal vez considere los siguientes:

background-Repeat:no-repeat;
background-Position: center center;

Answer 10

Puede asignar una imagen de fantasma alternativa si realmente necesita usar eventos de arrastre y no puede establecer draggable = false. Así que solo asigne un png en blanco como ese:

    $(''#img'').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement(''img'');
            dragIcon.src = ''blank.png'';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

Answer 11

Puede configurar el atributo que se puede draggable a false en el código de marcado o de JavaScript. Vea esta demostración .

// As a jQuery method: $(''#myImage'').attr(''draggable'', false);
document.getElementById(''myImage'').draggable = false;

<img id="myImage" src="http://placehold.it/150x150">

Answer 12

Puede configurar la imagen que se muestra cuando se arrastra un elemento. Probado con Chrome.

setDragImage

utilizar

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

Alternativamente, como ya se mencionó en las respuestas, puede establecer draggable="false" en el elemento HTML, si no puede arrastrar el elemento en absoluto no hay problema.

Answer 13

Puede usar una propiedad CSS para deshabilitar las imágenes en los navegadores webkit.

img{-webkit-user-drag: none;}