Comment désactiver le glisser en CSS

CSS Désactiver le glisser

CSS est l'un des outils importants pour la conception de la mise en page Web. Il possède de nombreuses propriétés qui peuvent parfaitement compléter vos idées de conception. Ceci est utile dans certains cas lorsque des éléments d'une page Web peuvent être déplacés, mais parfois ce n'est pas ce que nous voulons. Si vous développez un site internet et souhaitez que certains éléments soient indéplaçables, vous êtes au bon endroit. Dans cet article, nous apprendrons comment désactiver le glisser-déposer de certains éléments à l'aide de CSS.

Désactiver le glissement des images

Tout d'abord, apprenons comment désactiver le glissement des images. Ceci est généralement utilisé lorsque nous devons corriger la taille ou la position de l'image pour éviter les erreurs. Le code en CSS pour désactiver les images déplaçables est très simple, il suffit de définir l'attribut draggable de l'élément sur false :

img {
    draggable: false;
}

Cela empêchera les utilisateurs de déplacer ou de copier des images en les faisant glisser.

Désactiver le déplacement du texte

La désactivation du déplacement du texte est également une demande courante. Dans certains cas, nous souhaiterons peut-être empêcher l'utilisateur de sélectionner certains textes ou de les copier dans le presse-papiers. Pour rendre la propriété text d'un élément non déplaçable, nous pouvons utiliser la propriété CSS user-select et définir sa valeur sur none :

span {
    user-select: none;
}

Cela empêchera l'utilisateur de sélectionner et de copier le texte spécifié. Notez cependant que cela n'empêche pas les utilisateurs de copier à l'aide de raccourcis clavier (par exemple, ctrl+c ou command+c). Si vous devez empêcher la copie, vous devez utiliser d'autres techniques.

Désactiver le déplacement d'éléments

Parfois, nous souhaitons peut-être empêcher le déplacement de certains éléments sur la page. Ceci peut être réalisé en définissant la propriété draggable de l'élément sur false en CSS :

div {
    draggable: false;
}

De cette façon, l'utilisateur ne pourra pas déplacer l'élément vers une nouvelle position en utilisant le glisser.

De plus, si vous souhaitez empêcher le déplacement d'un élément de la page entière, vous pouvez définir l'attribut draggable de l'élément body sur false :

body {
    draggable: false;
}

Cela désactivera le déplacement de tout élément de la page entière.

Désactiver le déplacement de liens

Dans certains cas, nous devrons peut-être empêcher les utilisateurs de faire glisser certains liens vers de nouveaux onglets ou de nouvelles fenêtres. La désactivation du glissement de lien peut être réalisée avec le code suivant en CSS :

a {
    draggable: false;
}

De cette façon, lorsque l'utilisateur essaie de faire glisser le lien, il ne pourra pas se déplacer vers un nouvel onglet ou une nouvelle fenêtre.

Résumé

Dans cet article, nous avons appris comment désactiver le glisser-déposer de certains éléments à l'aide de CSS. Nous avons appris à désactiver le glissement d'images, le glissement de texte, le déplacement d'éléments entiers et le déplacement de liens. Que vous soyez ici pour profiter de la puissance du CSS ou pour protéger votre site contre les modifications accidentelles des utilisateurs, ces techniques vous offriront une configuration confortable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!