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

Question

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

1. Peut être déplacé et mis en évidence dans Firefox :

2. Nous ajoutons donc ceci, mais l'image peut toujours être mise en évidence lorsque l'on la fait glisser :

3. Nous l'ajoutons donc pour résoudre le problème de la mise en évidence, mais de manière contre-intuitive, l'image redevient déplaçable. Bizarre, je sais ! Utilisation de FF 16.0.1

Quelqu'un sait-il pourquoi en ajoutant -moz-user-select: none Le projet de loi sur l'immigration et l'asile draggable=false ? Bien sûr, webkit fonctionne comme prévu. Il n'y a rien sur les Interwebs à ce sujet... Ce serait formidable si nous pouvions faire la lumière sur ce sujet ensemble.

Editer : Il s'agit d'empêcher que des éléments de l'interface utilisateur soient déplacés par inadvertance et d'améliorer la convivialité - et non d'une tentative boiteuse de protection contre la copie.

Answer 1

Définissez les propriétés CSS suivantes pour l'image :

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

Answer 2

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.

Answer 3

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

Answer 4

Vous pourriez probablement simplement recourir à

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