ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WLanguage / WLanguage functions / Controls, pages and windows / Drag and drop functions
  • Overview
  • Example of Drag and Drop between a List Box and Button control
  • Example of Drag and Drop between a TreeView control and a TreeView Table control
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
This help page presents two examples of programmed Drag and Drop performed in a WINDEV application:
Example of Drag and Drop between a List Box and Button control
The following code is used to delete the data found in a List Box control by Drag and Drop to a graphic button containing a recycle bin. Only the move (cut/paste) is allowed. The move cursor is displayed during the move (cut/paste) between the List Box control and the "Bin" button.
  1. Definition of the source: the List Box control
    //- - Initialize the List Box control
    LIST_List.DndSource = dndProgram
  2. Defining the target: the BTN_Bin button. In the button initialization code, the Drag and Drop management procedures are also called using DnDEvent.
    In this example:
    • the dndDragOver event is used to change the mouse cursor ("Rollover" procedure).
    • the dndDrop event is used to program the process for managing the drop. In our case, this process corresponds to the deletion of element from the List Box control ("OnDrop" procedure).
    //- - Initializing the BTN_Bin button
    BTN_Bin.DndTarget = dndProgram
     
    // Call the OnDrop procedure when the left mouse button
    // is released on the BTN_Bin button
    DnDEvent("OnDrop", BTN_Bin, dndDrop)
     
    // Call the OnDragOver procedure when the mouse cursor
    // moves between the source list and the BTN_Bin button
    DnDEvent("OnDragOver", BTN_Bin, dndDragOver)
  3. Defining the procedures:
    PROCEDURE OnDragOver()
    // Cursor indicating the move
    DnDCursor(dndMove)

    PROCEDURE OnDrop()
    // Only the move is allowed (not the copy)
    DnDAccept(dndMove)
    // Delete the element from the source control
    ListDelete(_DND.SourceControl)
Example of Drag and Drop between a TreeView control and a TreeView Table control
The window contains:
  • a TreeView control populated programmatically.
  • a TreeView Table control populated programmatically.
The following example is used to move a Treeview control element (or a branch and its children) into a TreeView Table control. The two methods of programmed Drag and Drop are presented.
Method 1: Full programmed mode
  1. Defining the source control: the TreeView control:
    // -- Initialization code of TREE_MENU control
    TreeAdd(TREE_MENU, "STARTERS")
    TreeAdd(TREE_MENU, "STARTERS" + TAB + "Salad")
    TreeAdd(TREE_MENU, "STARTERS" + TAB + "Cooked meat")
    TreeAdd(TREE_MENU, "STARTERS" + TAB + "Prawn cocktail")
    TreeAdd(TREE_MENU, "MAIN COURSES")
    TreeAdd(TREE_MENU, "MAIN COURSES" + TAB + "Chicken stew")
    TreeAdd(TREE_MENU, "MAIN COURSES" + TAB + "Fish and chips")
    TreeAdd(TREE_MENU, "MAIN COURSES" + TAB + "Pasta with salmon")
    TreeAdd(TREE_MENU, "MAIN COURSES" + TAB + "Pasta alla carbonara")
    TreeAdd(TREE_MENU, "MAIN COURSES" + TAB + "Pork ribs")
    TreeAdd(TREE_MENU, "DESSERTS")
    TreeAdd(TREE_MENU, "DESSERTS" + TAB + "Caramel custard")
    TreeAdd(TREE_MENU, "DESSERTS" + TAB + "Chocolate cream")
    TreeAdd(TREE_MENU, "DESSERTS" + TAB + "Tiramisu")
    TreeAdd(TREE_MENU, "DESSERTS" + TAB + "Ice cream")
    TreeAdd(TREE_MENU, "DESSERTS" + TAB + "Apple pie")
     
    // Enable the programmed Drag and Drop
    TREE_MENU.DndSource = dndProgram
  2. Defining the target: the TreeView Table control. In the initialization code of TreeView Table control, the procedures for managing Drag and Drop are also called by DnDEvent.
    In this example:
    • the dndDragOver event is used to change the mouse cursor ("pRollover" procedure).
    • the dndDrop event is used to program the process for managing the drop. In our case, this process corresponds to the copy of the elements found in the Table control into the TreeView Table control ("pDrop" procedure).
      // -- Initializing the TreeView Table control
      TVT_MENU.DndTarget = dndProgram
       
      DnDEvent(pRollover, TVT_MENU, dndDragOver)
      DnDEvent(pDrop, TVT_MENU, dndDrop)
  3. Defining the procedures:
    PROCEDURE pRollover()
     
    // Cursor indicating the move
    DnDCursor(dndMove)

    PROCEDURE pDrop()
     
    // Only the move is allowed (not the copy)
    DnDAccept(dndMove)
     
    sRoot is string
    sLeaf is string
    sElement is string
    sChild is string
     
    sElement = TreeSelect(TREE_MENU)
    sRoot = ExtractString(sElement, 1, TAB, FromBeginning)
    sLeaf = ExtractString(sElement, 1, TAB, FromEnd)
     
    IF sLeaf = sRoot THEN
    IF TableSearchChild(COL_TREE, sRoot) = -1 THEN
    TableAddChild(TVT_MENU, 0, sRoot)
    END
     
    sChild = TreeGiveChild(TREE_MENU, sRoot, tvFirst)
    WHILE sChild <> ""
    TableAddChild(TVT_MENU, sRoot, sChild)
    sChild = TreeGiveChild(TREE_MENU, sRoot, tvNext)
    END
    ELSE
    IF TableSearchChild(COL_TREE, sRoot) = -1 THEN
    TableAddChild(TVT_MENU, 0, sRoot)
    END
    TableAddChild(TVT_MENU, sRoot, sLeaf)
    END
Method 2: Simplified programed mode
  1. Defining the source control: the TreeView control.
    TreeAdd(TREE_MENU1, "STARTERS")
    TreeAdd(TREE_MENU1, "STARTERS" + TAB + "Salad")
    TreeAdd(TREE_MENU1, "STARTERS" + TAB + "Cooked meat")
    TreeAdd(TREE_MENU1, "STARTERS" + TAB + "Prawn cocktail")
    TreeAdd(TREE_MENU1, "MAIN COURSES")
    TreeAdd(TREE_MENU1, "MAIN COURSES" + TAB + "Chicken stew")
    TreeAdd(TREE_MENU1, "MAIN COURSES" + TAB + "Fish and chips")
    TreeAdd(TREE_MENU1, "MAIN COURSES" + TAB + "Pasta with salmon")
    TreeAdd(TREE_MENU1, "MAIN COURSES" + TAB + "Pasta alla carbonara")
    TreeAdd(TREE_MENU1, "MAIN COURSES" + TAB + "Pork ribs")
    TreeAdd(TREE_MENU1, "DESSERTS")
    TreeAdd(TREE_MENU1, "DESSERTS" + TAB + "Caramel custard")
    TreeAdd(TREE_MENU1, "DESSERTS" + TAB + "Chocolate cream")
    TreeAdd(TREE_MENU1, "DESSERTS" + TAB + "Tiramisu")
    TreeAdd(TREE_MENU1, "DESSERTS" + TAB + "Ice cream")
    TreeAdd(TREE_MENU1, "DESSERTS" + TAB + "Apple pie")
    // Enable the programmed Drag and Drop
    TREE_MENU1..DndSource = dndProgram
  2. Defining the target: TreeView Table
    // -- Initializing the TreeView Table control
    TVT_MENU1.DndTarget = dndProgram
  3. Adding EVENTS specific to Drag and Drop into the code of the target control (code of TreeView Table control).
    • Open the events of the TreeView Table control (select "Code" in the control context menu).
    • Display the optional events window: click "Add other events" below the current control events.
    • In our example, the events to add are:
      • Rollover in target Drag/Drop (dndDragOver).
      • Drop in target Drag/Drop (dndDrop).
  4. Enter the code corresponding to the actions to perform:
    • Event for Drop in target Drag/Drop (dndDrop)
      // Only the move is allowed (not the copy)
      DnDAccept(dndMove)
       
      sRoot is string
      sLeaf is string
      sElement is string
      sChild is string
       
      sElement = TreeSelect(TREE_MENU1)
      sRoot = ExtractString(sElement, 1, TAB, FromBeginning)
      sLeaf = ExtractString(sElement, 1, TAB, FromEnd)
       
      IF sLeaf = sRoot THEN
      IF TableSearchChild(COL_TREE1, sRoot) = -1 THEN
      TableAddChild(TVT_MENU1, 0, sRoot)
      END
       
      sChild = TreeGiveChild(TREE_MENU1, sRoot, tvFirst)
      WHILE sChild <> ""
      TableAddChild(TVT_MENU1, sRoot, sChild)
      sChild = TreeGiveChild(TREE_MENU1, sRoot, tvNext)
      END
      ELSE
      IF TableSearchChild(COL_TREE1, sRoot) = -1 THEN
      TableAddChild(TVT_MENU1, 0, sRoot)
      END
      TableAddChild(TVT_MENU1, sRoot, sLeaf)
      END
    • Event for Rollover in target Drag/Drop (dndDragOver)
      // Cursor indicating the move
      DnDCursor(dndMove)
Related Examples:
Drag and drop Unit examples (WINDEV): Drag and drop
[ + ] Using Drag & Drop with the WLanguage functions.
The following topics are presented in this example:
1/ How to manage Drag&Drop between WINDEV controls
2/ How to manage Drag&Drop from the Windows file explorer to a WINDEV control
Drag & Drop is used to move objects via the mouse. "Drag" consists in clicking an object and moving the mouse while keeping the left button down. "Drop" consists in releasing the left mouse button.
Drag & Drop can be used with WINDEV on the List Box, TreeView, Table and Image controls.
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment

Last update: 06/22/2023

Send a report | Local help