Les déplacements de la souris

Par B2Moo Mise à jour : 19/01/2010 464 visites depuis 7 jours, classé 240/786

Bonjour, bonjour.

Vous avez sûrement déjà vu ces sites web où certaines icônes ou fenêtres sont déplaçables à la souris, ou alors où un texte suit le curseur. Vous vous êtes peut-être demandé comment réaliser ce genre d'effet. Avec du Javascript oui, mais encore ? Le sujet semble parfois complexe car tous les navigateurs ne sont pas compatibles.

Mais ne fuyez pas ! Attendez ! Je vais expliquer (du moins, essayer) clairement comment déplacer des éléments dans une page web grâce aux déplacements de la souris et j'espère bien vous voir devenir des pros de cette technique qu'on appelle parfois le "drag & drop".

Vous devriez être déjà assez à l'aise avec le HTML, le Javascript et le DOM pour bien comprendre ce tutoriel.

• Les bases
• Applications
• Commentaires et appréciations

• Retour en haut

  Partie 1 : Les bases

  Dans cette première partie, nous allons voir les bases de la gestion de la souris et par la même occasion un script pour déplacer des blocs à la manière des fenêtres des systèmes d'exploitation.

  • Chapitre 1

    ---

    Les coordonnées de la souris

    • La variable event
    • Les coordonnées
    • Position absolue
    • Fil rouge : gestion des fenêtres
    • Q.C.M.
  • Chapitre 2

    ---

    Les coordonnées des blocs

    • Centrer
    • Coordonnées
    • Fil rouge : décalage initial
    • Q.C.M.
  • Chapitre 3

    ---

    Les cibles

    • La propagation des évènements
    • Récupérer la cible
    • Avec des classes
    • Fil rouge : sans ajout d'évènement
    • Q.C.M.

  
  La première partie du tutoriel est terminée. On sait déplacer un objet, pour qu'il suive la souris. On a vu comment obtenir un décalage et aussi comment connaître l'élément qui est survolé par la souris.
  
  Pour faire des scripts plus évolués, c'est surtout une histoire d'innovation (ou plutôt d'imagination ? ).
• Retour en haut

  Partie 2 : Applications

  On monte d'un cran. Dans cette partie, on verra comment gérer un drag&drop, faire des animations ou obtenir d'autres effets.
  Parfois, il va falloir utiliser un peu de maths, mais on utilisera surtout la logique .

  • Chapitre 1

    ---

    Finalisation du script de fenêtres

    • Une histoire d'ordre
    • Le vrai style CSS
    • Maximiser
    • Cloisonnement
    • Q.C.M.
  • Chapitre 2

    ---

    Une liste ordonnée originale !

    • Code de base
    • Ajout du script
    • Le li fantôme
    • Comptage et camouflage

Partager

Retour en haut

7 commentaires pour "Les déplacements de la souris"

Note moyenne : 3.75 / 4 (12 votes)

Pseudo	Commentaire
samoua	# Posté le 25/06/2009 à 14:53:28
as	bonjour! je vous en prie puis-je avoir contact avec une personne qui métrise java, car j'ai un projet le 4 juillet et j'ai pas encore bien rodé sur java je suis entr1 de lire le cours sur le site du zero .svp je veux que quelqu'un m'aide a la realisation de ce projet,j'attend votre réponse. Merci On n'a rien inventé de mieux que la bêtise pour se croire intelligent.
LDSTaliesin	# Posté le 19/01/2010 à 12:54:40
Blog Twitter close Ville : Saintes Pays : France métropolitaine Études : Polytech'Nantes	GÉ-NIAL J'ai souvent cherché comment faire du drag&drop en Javascript et c'est tout à fait le tutoriel qu'il me fallait ! Merci beaucoup. Découvrez les Fleurs du mal de Baudelaire sur Android !
macduf59	# Posté le 20/01/2010 à 14:01:43
Ville : Dunkerque Pays : France métropolitaine	Bonjour, Merci pour ce tutoriel très intéressant, je voudrai intégrer dans un bloque un bouton qui renvoi vers un lien, mais quand je veux cliquer sur le bouton , la fenêtre se déplace, comment puis-je remédier à ce problème? Merci d'avance. Designer/WebMaster » dernière création GamerZ » AnG3rfist
Nicolas M.	# Posté le 04/06/2010 à 13:13:20
M(NiCoLaSm) = 406,9 g/mol Ville : Notre-dame de bondeville Pays : France métropolitaine	Très bon tutoriel pour très bons effets (sauf le graphisme des fenêtres ) 19.99/20 : Rien ni personne n'est parfait (sauf moi ) @samoua :Citation : Formulaire de réponse de cette page Nous vous rappelons que cet espace est réservé aux commentaires à propos des tutoriels, veillez donc à ne pas poser vos questions dans cette section. Pour cela, rendez-vous sur le forum ! Merci. Changer mon avatar Le saviez-vous ? Les forums sont environ 283 174 fois plus efficaces que ma boîte MP pour vous aider.
mdr1	# Posté le 24/11/2010 à 16:59:50
你好吗？我很好! Avis : Bon	Excellent tutoriel avec lequel on peut faire de super choses, bravo ! En revanche, je trouve qu'il est très mal expliqué. Secret (cliquez pour afficher) 12/20 Apprenez à programmer en TI-Basic ! Apprendre l'ASM Z80 pour TI ==> topic associé

Voir tous les commentaires