web-dev-qa-db-fra.com

CSS / JS pour empêcher le glissement des images fantômes?

Existe-t-il un moyen d'empêcher l'utilisateur de voir un fantôme de l'image qu'il tente de faire glisser (sans se soucier de la sécurité des images, mais de l'expérience).

J'ai essayé ceci qui résout le problème avec 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 dans une div en appliquant les mêmes règles que la div). Merci

javascripthtmlcsshtml5css3
115
user885355

Vous pouvez définir l'attribut draggable sur false dans le code de balisage ou JavaScript. Voir cette démo .

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

Je pense que tu peux changer ton

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

dans une

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

Essayez le:

img{pointer-events: none;}

et essayer d'éviter

*{pointer-events: none;}
17
Erik Rybalkin

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

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

Gérer l'événement dragstart et return false.

9
SLaks

Cela désactivera le glissement d'une image dans tous les navigateurs, tout en préservant les autres événements tels que cliquer et survoler. Fonctionne tant que HTML5, JS ou CSS sont disponibles.

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

Si vous êtes sûr que l'utilisateur aura JS, il vous suffira d'utiliser l'attribut JS, etc. Pour plus de flexibilité, consultez ondragstart, onselectstart et certains CSS de type tapoteur/touch de WebKit.

8
Beejor

Vous pouvez affecter une autre image fantôme si vous devez réellement utiliser les événements de glisser et que vous ne pouvez pas définir draggable = false. Il suffit donc d’attribuer un png vierge 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);
        }
    });
4
louisinhongkong

Placez l'image en tant qu'arrière-plan d'une div vide ou sous un élément transparent. Lorsque l'utilisateur clique sur l'image à faire glisser, il clique sur un div.

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

<div id="photo-drag-proxy"></div>
3
Michael Jasper

Pour Firefox, vous devez aller un peu plus loin avec ceci:

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

Prendre plaisir.

2
dijipiji

J'ai trouvé que pour IE, vous devez ajouter l'attribut draggable = "false" aux images et aux ancres pour empêcher le glissement. les options CSS fonctionnent pour tous les autres navigateurs. Je l'ai fait dans jQuery:

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

Il existe une solution beaucoup plus simple que d’ajouter des écouteurs d’événements vides. Il suffit de définir pointer-events: noneà votre image. Si vous avez toujours besoin que vous puissiez cliquer dessus, ajoutez-y un conteneur qui déclenche l'événement.

1
Micros

Testé sur Firefox: supprimer et remettre l'image fonctionne! Et c'est transparent à l'exécution aussi. Par exemple,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

EDIT : Cela ne fonctionne que sur IE et étrangement sur Firefox. J'ai aussi ajouté draggable = false sur chaque image. Toujours un fantôme avec Chrome et Safari.

EDIT 2: La solution d’image d’arrière-plan est véritablement la meilleure. La seule subtilité est que le background-size la propriété doit être redéfinie chaque fois que l’image d’arrière-plan est modifiée! Ou alors, c'est à ça que ça ressemblait de mon côté. Mieux encore, j'ai eu un problème avec les balises img normales sous IE, où IE n'a pas pu redimensionner les images. Désormais, les images ont les bonnes dimensions. Simple:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

Aussi, peut-être considérer ceux-ci:

background-Repeat:no-repeat;
background-Position: center center;
0
Tama Yoshi

Vous pouvez définir l'image à afficher lorsqu'un élément est déplacé. Testé avec Chrome.

setDragImage

utilisation

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

Alternativement, comme déjà mentionné dans les réponses, vous pouvez définir draggable="false" sur l’élément HTML, s’il n’est pas possible de faire glisser l’élément n’est pas un problème.

0
Thibauld Nuyten