Empêcher une image d'être déplaçable ou sélectionnable sans utiliser JS


132

Quelqu'un connaît-il un moyen de rendre une image non déplaçable et non sélectionnable - en même temps - dans Firefox, sans recourir à Javascript? Cela semble trivial, mais voici le problème:

1) Peut être glissé 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 mise en évidence, mais de manière contre-intuitive, l'image redevient déplaçable. Bizarre, je sais! Utilisation de FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

Alors, est-ce que quelqu'un sait pourquoi l'ajout de "-moz-user-select: none", aurait en quelque sorte l'avantage et désactiver "draggable = false"? Bien sûr, Webkit fonctionne comme prévu. Il n'y a rien sur Interwebs à ce sujet ... Ce serait génial si nous pouvions faire la lumière sur ce sujet ensemble.

Merci!!

Edit: Il s'agit d'empêcher les éléments de l'interface utilisateur d'être glissés par inadvertance et d'améliorer la convivialité - pas une tentative boiteuse d'un système de protection contre la copie :-)


1
J'espère que vous ne pensez pas que cela empêchera les gens d'enregistrer votre image sur le disque. Toute personne ayant même une légère compréhension du fonctionnement des navigateurs pourra contourner ce problème facilement.
Jim Garrison

@JimGarrison bien sûr que non, désolé j'aurais dû être plus précis, j'essaie d'empêcher certains de mes éléments d'interface utilisateur de se déplacer, dans le bon contexte, cela nuit à la convivialité.
tmkly3

Très utile à la place si vous avez des éléments d'arrière-plan qui seront glissés sur le bureau (ou pire comme des lignes de code href dans un fichier ouvert en arrière-plan derrière la fenêtre du navigateur tout en travaillant dessus!) Quand ils sont proches des très petites barres de défilement modernes et que vous ne touchez pas la barre exactement à chaque fois que vous testez les parchemins.
Garavani

1
C'est un problème connu dans Firefox depuis très longtemps car il s'avère ( dupliquer? )
Coderer

Réponses:


210

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;

3
Merci, je les ai également en place, mais le problème commence à ressembler à un bogue dans Firefox. Je suppose que le seul moyen de résoudre ce problème pour le moment est d'utiliser Javascript.
tmkly3

A travaillé sur tous les navigateurs.
Milad Abooali

D'accord, comment puis-je faire en sorte qu'il ne montre aucun effet mais déclenche toujours l'événement de traînée?
Ty_

6
J'ai trouvé que je pouvais toujours faire glisser Firefox 47 mais en ajoutant ondragstart = "return false;" de Masadow; propriété à la balise d'image l'a corrigé.
andrew pate

3
Je peux toujours faire glisser dans le chrome
lonewarrior556

54

J'ai oublié de partager ma solution, je ne pouvais pas trouver un moyen de le faire sans utiliser JS. Il y a des cas où le CSS suggéré par @Jeffery A Wooden ne couvrira pas.

C'est ce que j'applique à tous mes conteneurs UI, pas besoin de l'appliquer à chaque élément car il se récuse sur tous les éléments enfants.

CSS:

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

JS:

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 bien plus compliqué que nécessaire.


1
$ (el) .on ('dragstart', function (e) {e.preventDefault ();});
Pete B

3
Il pourrait également être écrit <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">pour correspondre au code d'OP.
Masadow

39

Vous pouvez utiliser la pointer-eventspropriété dans votre CSS et la définir sur "aucun"

img {
    pointer-events: none;
}

Édité

cela bloquera l'événement (clic). Une meilleure solution serait donc

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

1
En procédant de cette façon, une icône d'image se comporte plus comme un glyphicon, donc j'aime mieux cette méthode.
Funkodebat

9
Cela rend également les événements comme (onclick) inutilisables .. soyez prudent si vous utilisez cette approche.
Nicolas Bouvrette

Cette réponse est toujours valable tant que la réponse acceptée n'est pas sur les dernières versions du logiciel. Cela devrait être la nouvelle réponse acceptée. @ tmkly3
progyammer

cela créera un problème si nous avons un événement de clic pour l'image. Il bloquera l'événement de clic
Pratap AK

12

Selon la situation, il est souvent utile de faire de l'image une image d'arrière-plan d'un divavec CSS.

<div id='my-image'></div>

Puis en CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

Voir ce JSFiddle pour un exemple en direct avec un bouton et une option de dimensionnement différente.


9

Vous pourriez probablement avoir recours à

<img src="..." style="pointer-events: none;">

Cela devrait être la réponse acceptée, le glisser-déposer de l'utilisateur n'est pas pris en charge par Firefox. Merci pour ça!
Merritt6616

Pour moi aussi, "pointer-events" était la solution car il fonctionnait sur plusieurs navigateurs ("user-drag" n'a aucun effet sur Firefox, du moins en 11.2018)
David Dal Busco

2

Une solution générique spécialement pour le navigateur Windows Edge (comme l'option -ms-user-select: none; la règle CSS ne fonctionne pas):

window.ondragstart = function() {return false}

Remarque: Cela peut vous éviter d'avoir à ajouter draggable="false"à chaque imgbalise lorsque vous avez encore besoin de l'événement de clic (c'est-à-dire que vous ne pouvez pas l'utiliser pointer-events: none), mais que vous ne voulez pas que l'image de l'icône de glissement apparaisse.


La seule réponse qui fonctionne vraiment pour moi! Je ne sais pas pourquoi il n'a pas voté plus haut.
AldaronLau

1

Vous pouvez définir l'image comme image d'arrière-plan. Puisqu'elle réside dans un div, et que le divest indraggable, l'image sera indraggable:

<div style="background-image: url("image.jpg");">
</div>

1

J'ai créé un élément div qui a la même taille que l'image et est positionné au-dessus de l'image . Ensuite, les événements de souris ne vont pas à l'élément image.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.