PDF (adobe.com)

Application du comportement Tirer l'élément PA

Le comportement Tirer l'élément PA permet au visiteur de faire glisser un élément à positionnement absolu. Utilisez ce comportement pour créer des puzzles, des contrôles de déplacement et autres éléments mobiles de l'interface.

Vous pouvez spécifier la direction vers laquelle l'utilisateur peut faire glisser l'élément PA (horizontalement, verticalement ou dans toutes les directions), une cible vers laquelle l'utilisateur doit faire glisser l'élément PA, si ce dernier doit être aimanté par la cible ou non lorsqu'il arrive à moins d'un certain nombre de pixels de la cible, l'action à déclencher lorsque l'élément PA touche la cible, etc.

Etant donné que le comportement Tirer l'élément PA doit être appelé avant que le visiteur puisse faire glisser l'élément PA, vous devez l'associer à l'objet body (avec l'événementonLoad).

  1. Choisissez Insertion > Objets mise en forme > Div PA ou cliquez sur le bouton Tracer un div pour un élément PA du panneau Insertion, puis dessinez un div PA dans la vue Création de la fenêtre de document.
  2. Cliquez sur <body> dans le sélecteur de balises situé dans le coin inférieur gauche de la fenêtre de document.
  3. Choisissez Tirer l'élément PA dans le menu Ajouter un comportement du panneau Comportements.

    Si l'option Tirer l'élément PA n'est pas disponible, cela signifie probablement qu'un élément PA est sélectionné.

  4. Dans le menu déroulant Elément PA, sélectionnez l'élément PA.
  5. Sélectionnez soit Contraint, soit Libre dans le menu contextuel Mouvement.

    Les mouvements sans contrainte sont adaptés aux puzzles et aux autres jeux à base de glisser-déplacer. Pour les contrôles de déplacement et les objets mobiles (tiroirs, rideaux et stores), choisissez un mouvement contraint.

  6. Pour la restriction de mouvement, indiquez les valeurs de déplacement admises (en pixels) dans les zones de texte Haut, Bas, Gauche et Droite.

    Ces valeurs sont relatives à la position de départ de l'élément PA. Pour restreindre les déplacements à l'intérieur d'une zone rectangulaire, indiquez des valeurs positives dans les quatre zones de texte. Pour permettre uniquement un mouvement vertical, indiquez des valeurs positives pour Haut et Bas et 0 pour Gauche et Droite. Pour permettre uniquement un mouvement horizontal, indiquez des valeurs positives pour Gauche et Droite et 0 pour Haut et Bas.

  7. Indiquez les coordonnées (exprimées en pixels) de la cible de dépôt dans les zones de texte Gauche et Haut.

    La cible de dépôt est le point sur lequel vous voulez que l'utilisateur dépose l'élément PA. Un élément PA est considéré comme ayant atteint la cible de dépôt lorsque ses coordonnées d'origine (en haut à gauche) correspondent aux valeurs indiquées dans les zones de texte Gauche et Haut. Ces coordonnées sont relatives à l'angle supérieur gauche de la fenêtre du navigateur. Cliquez sur Obtenir la position courante pour remplir automatiquement les zones de texte avec les coordonnées actuelles de l'élément PA.

  8. Entrez une valeur (exprimée en pixels) dans la zone de texte Aligner si dans pour déterminer la distance minimale à laquelle le visiteur doit approcher de la cible pour que l'élément PA se place automatiquement sur celle-ci.

    Les valeurs importantes permettent à l'utilisateur de trouver plus facilement la cible de dépôt.

  9. Pour des puzzles simples et des défilements d'images, vous pouvez vous en tenir là. Pour définir la poignée de déplacement de l'élément PA, suivre le mouvement de l'élément PA pendant qu'il est déplacé et déclencher une action lorsqu'il est déposé, cliquez sur l'onglet Avancé.
  10. Pour spécifier que l'utilisateur doit cliquer dans une zone particulière de l'élément PA pour pouvoir le déplacer, sélectionnez Zone dans l'élément dans le menu Poignée de déplacement, puis indiquez les coordonnées de l'origine (angle supérieur gauche) de la poignée de déplacement, ainsi que la largeur et la hauteur de celle-ci.

    Cette option est utile lorsque l'image insérée à l'intérieur de l'élément PA contient un symbole de déplacement, par exemple une barre de titre ou une poignée de tiroir. N'activez pas cette option si vous voulez que l'utilisateur soit libre de cliquer n'importe où dans l'élément PA pour le déplacer.

  11. Choisissez, parmi les options de la zone En déplaçant, celles que vous désirez utiliser :

    • Activez l'option Placer l'élément au premier plan si l'élément PA doit être amené au niveau le plus haut de l'ordre de superposition lors de son déplacement. Si vous activez cette option, utilisez le menu déroulant qui apparaît pour indiquer si l'élément PA doit être laissé au niveau de visibilité le plus élevé ou si sa position d'origine dans l'ordre de superposition doit être rétablie.

    • Tapez un code JavaScript ou un nom de fonction (par exemple, monitorAPelement()) dans la zone de texte Appel JavaScript pour que ce code ou cette fonction soit exécuté en boucle pendant le déplacement de l'élément PA. Par exemple, vous pouvez écrire une fonction pour surveiller les coordonnées de l'élément PA et afficher des indications, telles que « Tu brûles » ou « Tu t'éloignes de la cible », dans une zone de texte.

  12. Indiquez un code JavaScript ou un nom de fonction (par exemple, evaluateAPelementPos()) dans la deuxième zone de texte Appel JavaScript si vous voulez que le code ou la fonction soit exécuté(e) lorsque l'élément PA est déposé. Activez l'option Uniquement si aligné si le code JavaScript indiqué ne doit être exécuté que si l'élément PA a atteint la cible de dépôt.
  13. Cliquez sur OK et vérifiez que l'événement par défaut est correct. Si ce n'est pas le cas, sélectionnez un autre événement ou changez de navigateur cible dans le sous-menu Afficher les événements pour.