web-dev-qa-db-fra.com

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? Cela semble banal, 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 alors 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, en ajoutant "-moz-user-select: none", on pourrait en quelque sorte écraser et désactiver "draggable = false"? Bien sûr, webkit fonctionne comme prévu. Il n’ya rien sur les Interwebs à ce sujet ... Ce serait formidable si nous pouvions éclairer la situation ensemble. 

Merci!!

Edit: Il s'agit d'empêcher les éléments de l'interface utilisateur d'être traînés par inadvertance et d'améliorer la convivialité - pas une tentative boiteuse d'un schéma de protection contre la copie :-)

htmlcsshtml5firefoxdraggable
106
tmkly3

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;
162
Jeff Wooden

J'ai oublié de partager ma solution, je ne pouvais pas trouver un moyen de le faire sans utiliser JS. Il existe certains cas où CSS suggéré par @Jeffery A Wooden ne couvre tout simplement pas. 

C’est ce que j’applique à tous mes conteneurs d’UI, il n’est pas nécessaire de l’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 bien plus compliqué que nécessaire.

54
tmkly3

Vous pouvez utiliser la propriété pointer-events dans votre CSS et lui attribuer la valeur "none".

img {
    pointer-events: none;
}

Edité

cela va bloquer (cliquer) l'événement. 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;
}
31
Linh Dam

Selon la situation, il est souvent utile de transformer l'image en image d'arrière-plan d'une div avec 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.

12
Nick Merrill

Vous pourriez probablement simplement recourir à

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

Vous pouvez définir l'image comme image d'arrière-plan. Dans la mesure où elle réside dans une div et que la div est impossibilité de numériser, l'image sera immuable:

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

Une solution générique spécialement conçue pour les navigateurs Windows Edge (en tant que -ms-user-select: none; la règle CSS ne fonctionne pas):

window.ondragstart = function () {return false}

Remarque: Ceci 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 que vous ne voulez pas que l’icône de glisser-déplacer apparaisse.

0
Philip Murphy

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

0
User