|
|
|
|
|
|
|
|
|
|
- Présentation
- Définir les sources et les cibles
- Déclarer les événements à gérer
- Agir pendant un événement
- Survol de la cible
- Lâcher du "Drag and Drop"
HTML 5 : Exemple de gestion du Drag and Drop programmé
Pour rendre un site WEBDEV plus interactif, il est possible de mettre en place un "Drag and Drop" (ou glisser-déplacer) dans les pages. Les différentes étapes pour mettre en place le Drag and Drop programmé sont les suivantes : - Définir les sources et les cibles du "Drag and Drop".
- Déclarer les événements à gérer.
- Agir pendant les événements.
Remarques : - Le "Drag and Drop" en HTML 5 est géré uniquement sous les navigateurs Chrome et Firefox (à l'heure de l'écriture de cette page).
- Attention : Le "Drag and Drop" en HTML 5 n'est pas utilisable dans les sites affichés sur un mobile. En effet, la technologie utilisée ne permet pas de faire la différence entre une action du Drag and Drop et une gesture sur le mobile.
- Cette page d'aide est basée sur l'exemple "WW_Drag_n_Drop_HTML5" livré avec WEBDEV.
Définir les sources et les cibles La première étape dans la mise en place du Drag and Drop est l'identification des champs qui vont être utilisés dans le "Drag and Drop".
Dans notre exemple, il existe : - 3 champs "sources" : il s'agit des 3 champs affichant les images des extincteurs. Dans le code d'initialisation de ces champs (code serveur), la propriété DndSource est utilisée pour indiquer que ces champs sont sources d'un "Drag and Drop" programmé.
// Indique que le champ est source d'un "Drag and Drop"
MoiMême.DndSource = dndProgrammé - 1 champ "destination" : il s'agit de l'image du plan. La propriété DndCible est utilisée dans le code d'initialisation de ce champ (code serveur).
// Indique que le champ est cible d'un "Drag and Drop"
MoiMême.DndCible = dndProgrammé
Déclarer les événements à gérer La fonction DnDEvénement permet de définir les événements gérés lors du "Drag and Drop". Cette fonction attend en paramètres : - le nom de la procédure WLangage qui sera exécutée lorsque l'événement aura lieu.
- le champ sur lequel l'événement doit être géré. Il est possible de spécifier un champ ou tous les champs de la page.
- l'événement à gérer. Plusieurs événements sont disponibles : début et fin du glisser déplacer, entrée et sortie du champ cible, survol du champ cible et lâcher sur le champ cible. Ces événements sont identifiés par des constantes (dndXXX).
Dans notre exemple, les deux événements gérés sont le survol et le lâcher. // Active le Drag and Drop sur l'image du plan
DnDEvénement(Survol, IMG_PLAN, dndSurvol)
DnDEvénement(Lacher, IMG_PLAN, dndLâcher) Agir pendant un événement Survol de la cible La procédure "Survol" est appelée lorsque l'utilisateur survolera la zone cible pendant un "Drag and Drop". Dans notre cas, lors du survol, le curseur est modifié afin d'indiquer à l'utilisateur que l'action est autorisée par le "Drag and Drop" sur ce champ cible. Il suffit pour cela d'utiliser la fonction DnDCurseur, avec la constante dndDéplaÂcer. PROCÉDURE Survol
// Modifie le curseur
DnDCurseur(dndDéplacer) Lâcher du "Drag and Drop" Lors du lâcher, plusieurs actions sont réalisées : - L'action de déplacement est acceptée via la fonction DnDAccepte.
PROCÉDURE Lacher
// On accepte le Drag and Drop
DnDAccepte(dndDéplacer) - La position du curseur est récupérée via les variables _DND.SourisPosX et _DND.SourisPosY.
Ces variables renvoient en effet la position du curseur au moment du lâcher sur la cible.
// Mémorise la position du curseur
nXImage = _DND.SourisPosX
nYImage = _DND.SourisPosY - Le champ source du "Drag and Drop" est également récupéré. Selon le champ source, la couleur associée va être mémorisée pour le dessin.
// Récupère le champ source
sIDExtincteur = _DND.ChampSource
// La couleur est différente selon l'extincteur sélectionné
SELON sIDExtincteur
CAS IMG_EXTINCTEUR.Nom
nCouleur = 255
CAS IMG_EXTINCTEUR1.Nom
nCouleur = 3243262
CAS IMG_EXTINCTEUR2.Nom
nCouleur = 65535
AUTRE CAS
nCouleur = 16706050
FIN - L'ensemble des données (coordonnées, couleur, taille) est ensuite mémorisé dans un tableau pour pouvoir être réutilisé lors du dessin par la procédure DessineTout.
// Sauvegarde les coordonnées
sCoordonnees = sIDExtincteur + TAB + nXImage + TAB + nYImage + TAB + ...
SAI_POTENTIOMETTRE + TAB + nCouleur
// Sauvegarde les informations
gnIndiceCourant++
gtabListeCoordonnees[gnIndiceCourant] = sCoordonnees
// Dessine les extincteurs sur le plan
DessineTout()
Liste des exemples associés :
|
Exemples unitaires (WEBDEV) : Les fonctionnalités de Drag And Drop HTML5
[ + ] Utilisation des fonctionnalités de Drag n Drop HTML 5 dans un site WEBDEV.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|