Comment désactiver le glisser-déposer par défaut de Firefox sur tous les comportements des images avec jQuery?

Firefox a cette fâcheuse comportement qu'il laisse l'utilisateur de faire glisser et déposer n'importe quel élément de l'image par défaut. Comment puis-je désactiver proprement ce comportement par défaut avec jQuery?

source d'informationauteur Void

  1. 29

    La suite va le faire dans Firefox 3 et plus tard:

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

    Si vous préférez ne pas désactiver tous les traîne (par exemple, vous souhaitez peut-être encore permettre aux utilisateurs de glisser des liens vers leur lien de la barre d'outils), vous pouvez assurez-vous seulement <img> élément traîne sont empêchés:

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

    Garder à l'esprit que cela permettra d'images dans les liens de glisser.

  2. 8

    Est-il nécessaire de jQuery? Vous avez juste besoin de définir une fonction de rappel pour votre événement mousedown sur l'image(s) en question avec event.preventDefault().

    De sorte que votre balise image pourrait ressembler à ceci:

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

    Supplémentaires if est nécessaire parce que sinon IE renvoie une erreur. Si vous voulez que ce pour toutes les balises d'image, vous avez juste besoin de parcourir les imgbalises avec jQuery et joindre le gestionnaire d'événements onmousedown.

    Il y a une bonne explication (et l'exemple) sur cette page: "Désactiver l'image en faisant glisser dans FireFox" et d'un pas aussi bien documenté version est ici à l'aide de jQuery comme référence: "Désactiver Firefox Image De Glisser"

  3. 5

    Solution sans jQuery:

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

    Si Javascript est une condition facultative, vous pouvez essayer avec CSS

    .wrapper img {
    pointer-events: none;
}
  5. 2

    Référencement Tim Bas's solution, vous pouvez réaliser l'équivalent de son deuxième extrait de code seulement la désactivation de img traîne tout en utilisant jQuery:

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

    Je ne me souviens pas de ma source, mais le travail

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