Empêcher une image d'être déplaçable ou sélectionnable sans utiliser JS
Est-ce que quelqu'un connaît un moyen de rendre une image non déplaçable et non sélectionnable-en même temps-dans Firefox, sans recourir à Javascript? Semble trivial, mais voici le problème:
1) peut être déplacé et mis en surbrillance dans Firefox:
<img src="...">
2) nous ajoutons donc ceci, mais l'image peut toujours être mise en surbrillance en faisant glisser:
<img src="..." draggable="false">
3) nous ajoutons donc ceci, pour résoudre le problème de surbrillance, mais ensuite contre-intuitivement, l'image redevient déplaçable. bizarre, je sais! Utiliser FF 16.0.1
<img src="..." draggable="false" style="-moz-user-select: none;">
Alors, est-ce que quelqu'un sait pourquoi ajouter "-moz-user-select: none", serait en quelque sorte l'atout et désactiver "draggable=false"? Bien sûr, webkit fonctionne comme prévu. Rien n'est là sur les Interwebs à propos de this...It ce serait génial si nous pouvions faire la lumière sur cela ensemble.
Merci!!
Modifier: Il s'agit de garder les éléments de L'interface utilisateur d'être traînés par inadvertance et d'améliorer la facilité d'utilisation-pas une tentative boiteuse d'un système de protection contre la copie :-)
7 réponses
Définissez les propriétés CSS suivantes sur l'image:
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
J'ai oublié de partager ma solution, je ne pouvais pas trouver un moyen de le faire sans utiliser JS. Il y a quelques cas de coin où @Jeffery a suggéré CSS En bois juste ne couvrira pas.
C'est ce que j'applique à tous mes conteneurs D'interface utilisateur, pas besoin de s'appliquer à chaque élément car il se récuse sur tous les éléments enfants.
.unselectable {
/* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
/* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
-moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
-webkit-user-select: none;
-ms-user-select: none; /* From IE10 only */
user-select: none; /* Not valid CSS yet, as of July 2012 */
-webkit-user-drag: none; /* Prevents dragging of images/divs etc */
user-drag: none;
}
var makeUnselectable = function( $target ) {
$target
.addClass( 'unselectable' ) // All these attributes are inheritable
.attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
.attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
.on( 'dragstart', function() { return false; } ); // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS
$target // Apply non-inheritable properties to the child elements
.find( '*' )
.attr( 'draggable', 'false' )
.attr( 'unselectable', 'on' );
};
C'était beaucoup plus compliqué que nécessaire.
Vous pouvez utiliser la propriété pointer-events
dans votre CSS et la définir sur 'none'
img {
pointer-events: none;
}
Édité
Cela bloquera l'événement (clic). Donc, une meilleure solution serait
<img draggable="false" (dragstart)="false;" class="unselectable">
.unselectable {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
, Selon la situation, il est souvent utile de faire de l'image une image d'arrière-plan d'un div
avec les CSS.
<div id='my-image'></div>
Puis en CSS:
#my-image {
background-image: url('/img/foo.png');
width: ???px;
height: ???px;
}
Voir ceci JSFiddle pour un exemple en direct avec un bouton et une option de dimensionnement différente.
Vous pourriez probablement simplement recourir à
<img src="..." style="pointer-events: none;">
Vous pouvez définir l'image comme image d'arrière-plan. Comme elle réside dans un div
, et que le div
n'est pas draggable, l'image ne sera pas draggable:
<div style="background-image: url("image.jpg");">
</div>
Une solution générique en particulier pour le navigateur Windows Edge (car la règle-ms-user-select: none; CSS ne fonctionne pas):
Fenêtre.ondragstart = function () {retourne false}
Remarque: cela peut vous éviter d'ajouter draggable = false à chaque balise img lorsque vous avez toujours besoin de l'événement click (c'est-à-dire que vous ne pouvez pas utiliser pointer-events=none), mais ne voulez pas que l'image de l'icône de glisser apparaisse.