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
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">
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;
}
Essayez le:
img{pointer-events: none;}
et essayer d'éviter
*{pointer-events: none;}
Vous pouvez utiliser une propriété CSS pour désactiver les images dans les navigateurs Webkit.
img{-webkit-user-drag: none;}
Gérer l'événement dragstart
et return false
.
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.
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);
}
});
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>
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.
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);
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.
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;
Vous pouvez définir l'image à afficher lorsqu'un élément est déplacé. Testé avec Chrome.
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.