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).
• Caution: Drag and Drop in HTML 5 cannot be used in the sites displayed on a mobile. 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 supplied with WEBDEV.

• 3 "source" controls: these 3 controls display the images of extinguishers. In the initialization code of these controls (server code), DndSource is used to specify that these controls are the source controls for a programmed Drag and Drop.
  
  // Indicates that the control is source for Drag and Drop
  MySelf.DndSource = dndProgram
  
• 1 "destination" control: it is the image of the plane. DndTarget is used in the initialization code of this control (server code).
  
  // Indicates that the control is target for Drag and Drop
  MySelf.DndTarget = 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, hover the target control and drop on the target control. These events are identified by constants (dndXXX).

Hovering the target

Drop of Drag and Drop

1. The move action is accepted via DnDAccept.
   
   PROCÉDURE Drop
   // Accept 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.
   
   // Stores the cursor position
   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.
   
   // Retrieves the source control
   sExtinguisherID = _DND.SourceControl
   // The color differs according to the selected extinguisher
   SWITCH sIDExtinguisher
   CASE IMG_EXTINGUISHER.Name
   nColor = 255
   CASE IMG_EXTINGUISHER1.Name
   nColor = 3243262
   CASE IMG_EXTINGUISHER2.Name
   nColor = 65535
   OTHER CASE
   nColor = 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.
   
   // Saves the coordinates
   sCoordinates = sExtinguisherID + TAB + nXImage + TAB + nYImage + TAB + ...
   EDT_SLIDER + TAB + nColor
   // Saves the information
   gnCurrentSubscript++
   garrListCoordinates[gnCurrentSubscript] = sCoordinates
   // Draws the extinguishers on the plane
   DrawAll()