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

Très simple ne pas compliquer les choses avec beaucoup de logique utilisez un attribut simple glissant et le rendre faux

<img draggable="false" src="img/magician.jpg" alt="" />

Answer 2

La panacée, pour ne pas sélectionner ou faire glisser, avec tous les préfixes de navigateur :

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

---

Vous pouvez également définir le draggable de l'attribut false . Vous pouvez le faire avec du HTML en ligne : draggable="false" avec Javascript : elm.draggable = false ou avec jQuery : elm.attr('draggable', false) .

Vous pouvez également gérer le onmousedown à la fonction return false . Vous pouvez le faire avec du HTML en ligne : onmousedown="return false" avec Javascript : elm.onmousedown=()=>return false; ou avec jQuery : elm.mousedown(()=>return false)

Answer 3

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

Answer 4

Manipuler le dragstart et return false .

Answer 5

Vous pouvez attribuer une autre image fantôme si vous avez vraiment besoin d'utiliser les événements de glissement et que vous ne pouvez pas définir draggable=false. Il suffit d'assigner un png vide comme ceci :

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