CSS /JS pour empêcher le déplacement d'une image fantôme ?

Question

Existe-t-il un moyen d'empêcher l'utilisateur de voir un fantôme de l'image qu'il essaie de faire glisser (il ne s'agit pas de la sécurité des images, mais de l'expérience) ?

J'ai essayé ceci qui résout le problème de la sélection bleue sur le texte et les images mais pas l'image fantôme :

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

(J'ai également essayé d'imbriquer l'image à l'intérieur d'un div avec les mêmes règles appliquées au div). Merci

Answer 1

Placez l'image comme arrière-plan d'un div vide ou sous un élément transparent. Lorsque l'utilisateur clique sur l'image pour la faire glisser, il clique sur une division.

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

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

Answer 2

Pour Firefox, il faut aller un peu plus loin :

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

Profitez-en.

Answer 3

J'ai découvert que pour IE, il faut ajouter l'attribut draggable="false" aux images et aux ancres pour empêcher le glissement. Les options CSS fonctionnent pour tous les autres navigateurs. J'ai fait cela en jQuery :

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

Answer 4

Il existe une solution beaucoup plus simple que l'ajout de récepteurs d'événements vides. Il suffit de définir pointer-events: none à votre image. Si vous avez toujours besoin qu'elle soit cliquable, ajoutez un conteneur autour d'elle qui déclenche l'événement.

Answer 5

Quand Firefox n'apprécie pas votre glissant (lorsqu'il est défini comme faux ) ou aucun de vos user-drag Règles CSS dans votre lien/ancre ou élément d'image :

Et vous voulez garder Pointeur-événements comme ils sont, vous pouvez utiliser les gros calibres pour ce fantôme " image translucide généré à partir de la cible du déplacement (l'élément sur lequel l'événement Dragstart a été déclenché)", comme décrit dans le document intitulé MDN setDragImage . Il suffit d'utiliser :

if (/(firefox)/i.test(navigator.userAgent)) {
  document.querySelector('.my-non-draggable').addEventListener('dragstart',
    e => e.preventDefault()
  );
  // or jQuery: $('.my-non-draggable').on('dragstart', e => e.preventDefault());
}