CSS / JS para impedir o arrastamento da imagem fantasma?

Existe uma maneira de impedir que o usuário veja um fantasma da imagem que está tentando arrastar (não se preocupe com a segurança das imagens, mas com a experiência).

Eu tentei isso que corrige o problema com a seleção azul no texto e nas imagens, mas não na imagem fantasma:

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

(Também tentei aninhar a imagem dentro de uma div com as mesmas regras aplicadas à div). obrigado

Você pode definir o draggableatributo falsena marcação ou no código JavaScript.

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

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

Eu acho que você pode mudar sua

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

dentro de

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

Tente:

img {
  pointer-events: none;
}

e tente evitar

* {
  pointer-events: none;
}

Você pode usar uma propriedade CSS para desativar imagens em navegadores de kit da web.

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

Isso desabilitará o arrasto de uma imagem em todos os navegadores , preservando outros eventos, como clicar e passar o mouse. Funciona desde que qualquer HTML5, JS ou CSS esteja disponível.

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

Se você está confiante de que o usuário terá JS, é necessário usar apenas o atributo JS, etc. Para obter mais flexibilidade, consulte ondragstart, onselectstart e alguns WebKit toques / toques em CSS.

Lidar com o dragstartevento e return false.

Você pode atribuir uma imagem fantasma alternativa se realmente precisar usar eventos de arrasto e não puder definir draggable = false. Então, basta atribuir um png em branco da seguinte maneira:

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

Coloque a imagem como plano de fundo de uma div vazia ou sob um elemento transparente. Quando o usuário clica na imagem para arrastar, ele está clicando em uma div.

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

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

Para o Firefox, você precisa ir um pouco mais fundo com isso:

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

Aproveitar.

Descobri que, para o IE, você deve adicionar o atributo draggable = "false" às ​​imagens e âncoras para evitar arrastar. as opções de CSS funcionam para todos os outros navegadores. Eu fiz isso no jQuery:

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

Há uma solução muito mais fácil aqui do que adicionar ouvintes de eventos vazios. Basta definir pointer-events: nonea sua imagem. Se você ainda precisa clicar, adicione um contêiner ao redor dele que aciona o evento.

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

Testado no Firefox: remover e colocar de volta a imagem funciona! E é transparente na execução também. Por exemplo,

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

Edição : Isso funciona apenas no IE e no Firefox, estranhamente. Eu também adicionei draggable = falseem cada imagem. Ainda é um fantasma com o Chrome e o Safari.

EDIT 2 : A solução de imagem de fundo é realmente a melhor. A única sutileza é que a background-sizepropriedade precisa ser redefinida toda vez que a imagem de fundo é alterada! Ou então, é assim que parecia do meu lado. Melhor ainda, tive um problema com imgtags normais no IE, onde o IE não conseguiu redimensionar as imagens. Agora, as imagens têm as dimensões corretas. Simples:

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

Além disso, talvez considere os seguintes:

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

Você pode definir a imagem exibida quando um item é arrastado. Testado com o Chrome.

setDragImage

usar

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

Como alternativa, como já mencionado nas respostas, você pode definir draggable="false"o elemento HTML, se não conseguir arrastar o elemento, não há problema.

O "tudo para tudo", para não selecionar ou arrastar, com todos os prefixos do 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;

Você também pode definir o draggableatributo para false. Você pode fazer isso com HTML de inline: draggable="false"com Javascript: elm.draggable = falseou com jQuery: elm.attr('draggable', false).

Você também pode manipular a onmousedownfunção para return false. Você pode fazer isso com HTML embutido:, onmousedown="return false"com Javascript: elm.onmousedown=()=>return false;ou com jQuery:elm.mousedown(()=>return false)

Este trabalho para mim, eu uso alguns scripts lightbox

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