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

¿Hay alguna manera de evitar que el usuario vea un fantasma de la imagen que está tratando de arrastrar (no le preocupa la seguridad de las imágenes, sino la experiencia).

He intentado esto que soluciona el problema con la selección azul en texto e imágenes, pero no 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

Puede establecer el draggableatributo falseen el código de marcado o JavaScript.

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

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

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

Intentalo:

img {
  pointer-events: none;
}

e intenta evitar

* {
  pointer-events: none;
}

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

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

Esto deshabilitará el arrastre de una imagen en todos los navegadores , al tiempo que preservará 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, busque ondragstart, onselectstart y algunos CSS de toque / toque de WebKit.

Manejar el dragstartevento y return false.

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

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

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>

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.

Descubrí que para IE, debe agregar el atributo draggable = "false" a las imágenes y los 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);

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

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

Probado en Firefox: ¡eliminar y volver a colocar la imagen funciona! Y también es transparente en la ejecució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, curiosamente. También agregué draggable = falseen cada imagen. Todavía 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 background-sizepropiedad debe redefinirse cada vez que se cambia la imagen de fondo! O eso es lo que parecía desde mi lado. Mejor aún, tuve un problema con las imgetiquetas normales 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, quizás considere aquellos:

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

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 configurar draggable="false"el elemento HTML, si no es posible arrastrar el elemento en absoluto.

Be-all-end-all, para no seleccionar ni arrastrar, con todos los prefijos del navegador:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

También puede establecer el draggableatributo en false. Usted puede hacer esto con HTML en línea: draggable="false"con Javascript: elm.draggable = falseo con jQuery: elm.attr('draggable', false).

También puede manejar la onmousedownfunción para return false. Puede hacer esto con HTML en línea:, onmousedown="return false"con Javascript: elm.onmousedown=()=>return false;o con jQuery:elm.mousedown(()=>return false)

Esto funciona para mí, uso algunos scripts de lightbox

.nodragglement {
    transform: translate(0px, 0px)!important;
}