1. Define the sources and targets of Drag and Drop.
2. Declare the events to manage.
3. Act during the events.

• Drag and Drop in HTML 5 is supported by the Chrome and Firefox browsers (at the time this page is written).
• Please note: HTML 5 "Drag and Drop" cannot be used on sites displayed on cell phones. Indeed, the technology used cannot make the difference between an action of Drag and Drop and a gesture on mobile.
• This help page is based on the "WW_Drag_n_Drop_HTML5" example provided with WEBDEV.

• 3 "source" fields: these are the 3 fields displaying the extinguisher images. In the initialization code of these controls (server code), the DndSource property specifies that these controls are the source controls for a programmed Drag and Drop.
  

  // Indique que le champ est source d'un "Drag and Drop" 
  MySelf.DndSource = dndProgram

• 1 "destination" control: the image of the plan. The DndTarget property is used in the initialization code of this control (server code).
  

  // Indique que le champ est cible d'un "Drag and Drop" 
  MySelf.DndCible = dndProgram

• the name of the WLanguage procedure that will be run when the event is triggered.
• the control on which the event must be managed. You have the ability to specify a control or all the page controls.
• the event to manage. Several events are available: beginning and end of Drag and Drop, entry into and exit from the target control, rollover of the target control and drop on the target control. These events are identified by constants (dndXXX).

// Active le Drag and Drop sur l'image du plan 
DnDEvent(Survol, IMG_PLAN, dndDragOver) 
DnDEvent(Lacher, IMG_PLAN, dndDrop)

Hovering the target

PROCEDURE Survol
// Modifie le curseur 
DnDCursor(dndMove)

Drop of Drag and Drop

1. The move action is accepted via DnDAccept.
   

   PROCEDURE Lacher
   // On accepte le Drag and Drop 
   DnDAccept(dndMove)

2. The cursor position is retrieved via the _DND.MouseXPos and _DND.MouseYPos variables.
   These variables return the cursor position during the drop on the target.
   

   // Mémorise la position du curseur
   nXImage = _DND.MouseXPos 
   nYImage = _DND.MouseYPos

3. The source control of "Drag and Drop" is also retrieved. According to the source control, the associated color will be stored for the drawing.
   

   // Récupère le champ source
   sIDExtincteur = _DND.SourceControl
   // La couleur est différente selon l'extincteur sélectionné 
   SWITCH sIDExtincteur 
   	CASE IMG_EXTINCTEUR.Nom 
   		nCouleur = 255 
   	CASE IMG_EXTINCTEUR1.Nom 
   		nCouleur = 3243262 
   	CASE IMG_EXTINCTEUR2.Nom 
   		nCouleur = 65535 
   	OTHER CASE
   		nCouleur = 16706050 
   END

4. The entire data (coordinates, color, size) is stored in an array so that it can be re-used when the drawing is performed by the DrawAll procedure.
   

   // 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()