Come disabilitare il drag and drop predefinito di Firefox sul comportamento di tutte le immagini con jQuery?

Question

Firefox ha questo comportamento fastidioso che consente all'utente di trascinare e rilasciare qualsiasi elemento dell'immagine per impostazione predefinita. Come posso disabilitare in modo pulito questo comportamento predefinito con jQuery?

Answer 1

Di seguito lo farà in Firefox 3 e versioni successive:

$(document).on("dragstart", function() { 
    return false; 
}); 

Se si preferisce non per disabilitare tutte le trascina (ad esempio, si potrebbe desiderare di consentire comunque agli utenti di trascinare link al loro barra degli strumenti di collegamento), è potrebbe assicurarsi solo <img> trascina elemento viene impedito:

$(document).on("dragstart", function(e) { 
    if (e.target.nodeName.toUpperCase() == "IMG") { 
     return false; 
    } 
}); 

Tenete a mente che questo permetterà immagini all'interno di collegamenti per essere trascinati.

Answer 2

Ha bisogno di essere jQuery? Hai solo bisogno di definire una funzione di callback per il tuo evento "salvadanaio" sulle immagini in questione con event.preventDefault().

Così il vostro tag di immagine potrebbe essere la seguente:

<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />

L'ulteriore if è necessario perché altrimenti IE genera un errore. Se vuoi questo per tutti i tag immagine, devi solo scorrere i tag img con jQuery e collegare il gestore di eventi onmousedown.

C'è una bella spiegazione (e l'esempio) in questa pagina: "Disable image dragging in FireFox" e una versione non come ben documentato è qui utilizzando jQuery come riferimento: "Disable Firefox Image Drag"

Answer 3

Non mi ricordo la mia fonte, ma il lavoro

<script type="text/javascript"> 

    // register onLoad event with anonymous function 
window.onload = function (e) { 
    var evt = e || window.event,// define event (cross browser) 
     imgs,     // images collection 
     i;      // used in local loop 
    // if preventDefault exists, then define onmousedown event handlers 
    if (evt.preventDefault) { 
     // collect all images on the page 
     imgs = document.getElementsByTagName('img'); 
     // loop through fetched images 
     for (i = 0; i < imgs.length; i++) { 
      // and define onmousedown event handler 
      imgs[i].onmousedown = disableDragging; 
     } 
    } 
}; 

// disable image dragging 
function disableDragging(e) { 
    e.preventDefault(); 
} 
</script> 

Answer 4

Riferimento soluzione Tim Giù 's, è possibile ottenere l'equivalente del suo secondo frammento di codice di disabilitazione solo img trascina durante l'utilizzo di jQuery:

$(document).on("dragstart", "img", function() { 
    return false; 
}); 

Answer 5

soluzione senza jQuery:

document.addEventListener('dragstart', function (e) { 
    e.preventDefault(); 
}); 

Answer 6

Se Javascript è un requisito opzionale, si può provare con i CSS

.wrapper img { 
    pointer-events: none; 
}