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

Vous pouvez régler le draggable à l'attribut false dans le balisage ou le code JavaScript.

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

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

Answer 2

Je pense que vous pouvez changer votre

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

en un

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

Answer 3

Essayez-le :

img {
  pointer-events: none;
}

et essayer d'éviter

* {
  pointer-events: none;
}

Answer 4

Ceci désactivera la fonction de glisser pour une image dans tous les navigateurs tout en préservant les autres événements tels que les clics et les survols. Fonctionne tant que l'un des éléments HTML5, JS ou CSS est disponible.

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

Si vous êtes sûr que l'utilisateur disposera de JS, il vous suffit d'utiliser l'attribut JS, etc. Pour plus de flexibilité, consultez ondragstart, onselectstart et certaines CSS WebKit tap/touch.

Answer 5

Vous pouvez utiliser une propriété CSS pour désactiver les images dans les navigateurs webkit.

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