CSS / JS per impedire il trascinamento dell'immagine fantasma?

C'è un modo per impedire all'utente di vedere un fantasma dell'immagine che stanno cercando di trascinare (non preoccupazione per la sicurezza delle immagini, ma l'esperienza).

Ho provato questo che risolve il problema con la selezione blu su testo e immagini ma non sull'immagine fantasma:

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

(Ho anche provato a nidificare l'immagine all'interno di un div con le stesse regole applicate al div). Grazie

È possibile impostare l' draggableattributo su falsenel markup o nel codice JavaScript.

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

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

Penso che tu possa cambiare il tuo

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

in un

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

Provalo:

img {
  pointer-events: none;
}

e cerca di evitare

* {
  pointer-events: none;
}

È possibile utilizzare una proprietà CSS per disabilitare le immagini nei browser webkit.

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

Ciò disabiliterà il trascinamento di un'immagine in tutti i browser , preservando altri eventi come clic e passaggio del mouse. Funziona finché sono disponibili HTML5, JS o CSS.

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

Se sei sicuro che l'utente avrà JS, devi solo usare l'attributo JS, ecc. Per maggiore flessibilità, guarda ondragstart, onselectstart e alcuni WebKit tocca / tocca CSS.

Gestisci l' dragstartevento e return false.

Puoi assegnare un'immagine fantasma alternativa se devi davvero utilizzare gli eventi di trascinamento e non puoi impostare draggable = false. Quindi basta assegnare un png vuoto in questo modo:

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

Posiziona l'immagine come sfondo di un div vuoto o sotto un elemento trasparente. Quando l'utente fa clic sull'immagine per trascinarla, sta facendo clic su un div.

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

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

Per Firefox devi andare un po 'più a fondo con questo:

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

Godere.

Ho scoperto che per IE è necessario aggiungere l'attributo draggable = "false" alle immagini e alle ancore per impedire il trascinamento. le opzioni CSS funzionano per tutti gli altri browser. L'ho fatto in jQuery:

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

Esiste una soluzione molto più semplice rispetto all'aggiunta di listener di eventi vuoti. Basta impostare pointer-events: nonesulla tua immagine. Se hai ancora bisogno che sia cliccabile, aggiungi un contenitore attorno che attivi l'evento.

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

Testato su Firefox: la rimozione e la reimpostazione dell'immagine funziona! Ed è anche trasparente all'esecuzione. Per esempio,

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

EDIT : Funziona solo su IE e su Firefox, stranamente. Ho anche aggiunto draggable = falsesu ogni immagine. Ancora un fantasma con Chrome e Safari.

EDIT 2 : La soluzione di immagine di sfondo è davvero la migliore. L'unica sottigliezza è che la background-sizeproprietà deve essere ridefinita ogni volta che l'immagine di sfondo viene cambiata! O almeno, è così che sembrava dalla mia parte. Meglio ancora, ho avuto un problema con i normali imgtag in IE, in cui IE non è riuscito a ridimensionare le immagini. Ora, le immagini hanno le dimensioni corrette. Semplice:

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

Inoltre, forse considera quelli:

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

È possibile impostare l'immagine che viene mostrata quando si trascina un elemento. Testato con Chrome.

setDragImage

uso

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

In alternativa, come già accennato nelle risposte, è possibile impostare draggable="false"l'elemento HTML, se non è possibile trascinare affatto l'elemento non è un problema.

Il be-all-end-all, per nessuna selezione o trascinamento, con tutti i prefissi del browser:

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

È inoltre possibile impostare l' draggableattributo su false. È possibile farlo con Inline HTML: draggable="false"con Javascript: elm.draggable = falseo con jQuery: elm.attr('draggable', false).

Puoi anche gestire la onmousedownfunzione return false. Puoi farlo con HTML inline:, onmousedown="return false"con Javascript: elm.onmousedown=()=>return false;o con jQuery:elm.mousedown(()=>return false)

Questo lavoro per me, utilizzo alcuni script lightbox

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