ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WLanguage / WLanguage functions / Controls, pages and windows / Drag and drop functions
  • Overview
  • Defining the sources and the targets
  • Declaring the events to manage
  • Acting during an event
  • Hovering the target
  • Drop of Drag and Drop
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
To make a WEBDEV site more interactive, you have the ability to implement Drag and Drop in the pages.
The steps for implementing a programmed Drag and Drop are as follows:
  1. Define the sources and targets of Drag and Drop.
  2. Declare the events to manage.
  3. Act during the events.
Remarks:
  • 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 provided with WEBDEV.
Defining the sources and the targets
The first step consists in identifying the controls that will be used in the Drag and Drop operations.
In our example, you will find:
  • 3 "source" controls: these 3 controls display the images of extinguishers. 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.
    // Indicates that the control is source for Drag and Drop
    MySelf.DndSource = dndProgram
  • 1 "destination" control: it is the image of the plane. The DndTarget property is used in the initialization code of this control (server code).
    // Indicates that the control is target for Drag and Drop
    MySelf.DndTarget = dndProgram
Declaring the events to manage
DnDEvent is used to define the events managed during Drag and Drop. This function expects as parameter:
  • 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).
Two events are supported in our example: rollover and drop.
// Enables Drag and Drop on the image of the plane
DnDEvent(Rollover, IMG_PLANE, dndDragOver)
DnDEvent(Drop, IMG_PLANE, dndDrop)
Acting during an event

Hovering the target

The "Rollover" procedure is called when the target area is hovered by the user during Drag and Drop.
In our case, during the rollover, the cursor is modified to specify to the user that the action is allowed by the Drag and Drop on this target control.
To do so, use DnDCursor associated with the dndMove constant.
PROCÉDURE HoverOver
// Modifies the cursor
DnDCursor(dndMove)

Drop of Drag and Drop

Several actions are performed during the 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
    gnCurrentIndex++
    garrListCoordinates[gnCurrentIndex] = sCoordinates
    // Draws the extinguishers on the plane
    DrawAll()
Related Examples:
The features of Drag And Drop HTML5 Unit examples (WEBDEV): The features of Drag And Drop HTML5
[ + ] Using the Drag n Drop HTML 5 features in a WEBDEV site.
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment

Last update: 06/22/2023

Send a report | Local help