DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / WLangage / Fonctions WLangage / Champs, pages et fenêtres / Fonctions Drag and Drop
  • 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"
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
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 :
  1. Définir les sources et les cibles du "Drag and Drop".
  2. Déclarer les événements à gérer.
  3. 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 :
  1. L'action de déplacement est acceptée via la fonction DnDAccepte.
    PROCÉDURE Lacher
    // On accepte le Drag and Drop
    DnDAccepte(dndDéplacer)
  2. 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
  3. 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
  4. 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 :
Les fonctionnalités de Drag And Drop HTML5 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.
Version minimum requise
  • Version 17
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale