Vidéo: Tutoriel JavaScript : Réorganisation en drag'n drop 2025
Parfois, un utilisateur doit repositionner les éléments de l'écran pour les rendre plus faciles à voir ou à utiliser. Dans CSS3, la création d'un environnement dans lequel l'utilisateur peut déplacer des éléments n'a pas besoin d'écrire des rames de code. En fait, tout ce dont vous avez vraiment besoin est d'une seule méthode appelée draggable ().
Le code suivant montre la méthode utilisée pour créer un paragraphe pouvant être déplacé dans cet exemple. (Vous pouvez trouver le code complet de cet exemple dans le dossier Chapter 06Interactions du code téléchargeable sous la forme DragContent.HTML.)
$ (function () {$ ("# MoveMe"). Draggable ();});
Ce code est intéressant car il crée en fait une fonction anonyme jQuery qui étend l'environnement jQuery plutôt que de travailler avec une fonction de page particulière.
Le focus de cet appel est un paragraphe (balise
) avec un identifiant de MoveMe. Tout ce que vous avez à faire est d'accéder à ce membre et d'appeler draggable () pour le faire bouger. Essayez l'exemple téléchargeable et vous trouvez que vous pouvez déplacer le paragraphe où vous voulez sur la page.
Pour créer une boîte amovible, cet exemple repose sur un style personnalisé. Le style crée une bordure, laisse beaucoup de place au texte, puis centre le texte horizontalement et verticalement. Voici le style utilisé pour cet exemple:
#MoveMe {border: solid; largeur: 200px; hauteur: 5em; text-align: centre; line-height: 5em;}
De nombreux développeurs rencontrent des problèmes de centrage vertical du texte dans une balise
. Vous pouvez trouver plusieurs façons d'effectuer cette tâche. Cependant, l'un des moyens les plus simples d'effectuer le travail de manière cohérente avec les plates-formes et les navigateurs consiste à utiliser le style de hauteur de ligne comme indiqué dans l'exemple.
L'astuce consiste à définir les styles height et line-height avec la même valeur - le texte apparaîtra toujours au milieu.
