WINDEV: Example of programmed Drag and Drop

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

This content has been translated automatically. Click here to view the French version.

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

WEBDEV

WINDEV Mobile

Others

See also

WINDEV: Example of programmed Drag and Drop

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 control and a button.
Example of Drag and Drop between a TreeView control and a TreeView Table control.

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.

Source definition: the List Box control

//- - Initialisation du champ Liste
LISTE_Liste.DndSource = dndProgram

Target definition: the BTN_Poubelle 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).

//- - Initialisation bouton BTN_Poubelle
BTN_Poubelle.DndCible = dndProgram

// Appel de la procédure SurLâcher lorsque le bouton gauche 
// de la souris est relâché sur le bouton BTN_Poubelle
DnDEvent("SurLâcher", BTN_Poubelle, dndDrop)

// Appel de la procédure SurSurvol lorsque le curseur de la souris 
// se déplace entre la liste source et le bouton BTN_Poubelle
DnDEvent("SurSurvol", BTN_Poubelle, dndDragOver)

Defining the procedures:

PROCEDURE SurSurvol()
// Curseur indiquant le déplacement
DnDCursor(dndMove)

PROCEDURE SurLâcher()
// Seul le déplacement est autorisé (pas le copier)
DnDAccept(dndMove)
// Suppression de l'élément dans le champ source
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 program mode

Definition of the source field: the TreeView control:

// -- Code Initialisation champ ARBRE_MENU 
TreeAdd(ARBRE_MENU, "ENTREES")
TreeAdd(ARBRE_MENU, "ENTREES" + TAB + "Crudités")
TreeAdd(ARBRE_MENU, "ENTREES" + TAB + "Charcuterie")
TreeAdd(ARBRE_MENU, "ENTREES" + TAB + "Avocats")
TreeAdd(ARBRE_MENU, "PLATS")
TreeAdd(ARBRE_MENU, "PLATS" + TAB + "Poulet curry")
TreeAdd(ARBRE_MENU, "PLATS" + TAB + "Sole meunière")
TreeAdd(ARBRE_MENU, "PLATS" + TAB + "Tagliatelle au saumon")
TreeAdd(ARBRE_MENU, "PLATS" + TAB + "Tagliatelle carbonara")
TreeAdd(ARBRE_MENU, "PLATS" + TAB + "Entrecôte")
TreeAdd(ARBRE_MENU, "DESSERTS")
TreeAdd(ARBRE_MENU, "DESSERTS" + TAB + "Crème brûlée")
TreeAdd(ARBRE_MENU, "DESSERTS" + TAB + "Mousse chocolat")
TreeAdd(ARBRE_MENU, "DESSERTS" + TAB + "Tiramisu")
TreeAdd(ARBRE_MENU, "DESSERTS" + TAB + "Glace")
TreeAdd(ARBRE_MENU, "DESSERTS" + TAB + "Tarte pomme")

// Activation du Drag and Drop programmé
ARBRE_MENU.DndSource = dndProgram

Defining the target: the TreeView Table control field. 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).
  // -- Initialisation du champ Table hiérarchique TABLEH_MENU.DndCible = dndProgram DnDEvent(pSurvol, TABLEH_MENU, dndDragOver) DnDEvent(pLacher, TABLEH_MENU, dndDrop)

Defining the procedures:

PROCEDURE pSurvol()

// Curseur indiquant le déplacement
DnDCursor(dndMove)

PROCEDURE pLacher()

// Seul le déplacement est autorisé (pas le copier)
DnDAccept(dndMove)

sRacine is string
sFeuille is string
sElement is string
sFils is string

sElement = TreeSelect(ARBRE_MENU)
sRacine = ExtractString(sElement, 1, TAB, FromBeginning)
sFeuille = ExtractString(sElement, 1, TAB, FromEnd)

IF sFeuille = sRacine THEN
	IF TableSearchChild(COL_ARBRE, sRacine) = -1 THEN 
		TableAddChild(TABLEH_MENU, 0, sRacine)
	END

	sFils = TreeGiveChild(ARBRE_MENU, sRacine, tvFirst)
	WHILE sFils <> ""
		TableAddChild(TABLEH_MENU, sRacine, sFils)
		sFils = TreeGiveChild(ARBRE_MENU, sRacine, tvNext)
	END
ELSE
	IF TableSearchChild(COL_ARBRE, sRacine) = -1 THEN
		TableAddChild(TABLEH_MENU, 0, sRacine)
	END
	TableAddChild(TABLEH_MENU, sRacine, sFeuille)
END

Method 2: Simplified program mode

Definition of the source field: the TreeView control field.

TreeAdd(ARBRE_MENU1, "ENTREES")
TreeAdd(ARBRE_MENU1, "ENTREES" + TAB + "Crudités")
TreeAdd(ARBRE_MENU1, "ENTREES" + TAB + "Charcuterie")
TreeAdd(ARBRE_MENU1, "ENTREES" + TAB + "Avocats")
TreeAdd(ARBRE_MENU1, "PLATS")
TreeAdd(ARBRE_MENU1, "PLATS" + TAB + "Poulet curry")
TreeAdd(ARBRE_MENU1, "PLATS" + TAB + "Sole meunière")
TreeAdd(ARBRE_MENU1, "PLATS" + TAB + "Tagliatelle au saumon")
TreeAdd(ARBRE_MENU1, "PLATS" + TAB + "Tagliatelle carbonara")
TreeAdd(ARBRE_MENU1, "PLATS" + TAB + "Entrecôte")
TreeAdd(ARBRE_MENU1, "DESSERTS")
TreeAdd(ARBRE_MENU1, "DESSERTS" + TAB + "Crème brûlée")
TreeAdd(ARBRE_MENU1, "DESSERTS" + TAB + "Mousse chocolat")
TreeAdd(ARBRE_MENU1, "DESSERTS" + TAB + "Tiramisu")
TreeAdd(ARBRE_MENU1, "DESSERTS" + TAB + "Glace")
TreeAdd(ARBRE_MENU1, "DESSERTS" + TAB + "Tarte pomme")
// Activation du Drag and Drop programmé
ARBRE_MENU1..DndSource = dndProgram

Target definition: Hierarchical table

// -- Initialisation du champ Table hiérarchique
TABLEH_MENU1.DndCible = dndProgram

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 on the "Add other events" link at the end of the field events.
- In our example, the events to add are:
  - Rollover in target Drag/Drop (dndDragOver).
  - Drop in target Drag/Drop (dndDrop).

Enter the code corresponding to the actions to perform:

Event for Drop in target Drag/Drop (dndDrop)

// Seul le déplacement est autorisé (pas le copier)
DnDAccept(dndMove)

sRacine is string
sFeuille is string
sElement is string
sFils is string

sElement = TreeSelect(ARBRE_MENU1)
sRacine = ExtractString(sElement, 1, TAB, FromBeginning)
sFeuille = ExtractString(sElement, 1, TAB, FromEnd)

IF sFeuille = sRacine THEN
	IF TableSearchChild(COL_ARBRE1, sRacine) = -1 THEN
		TableAddChild(TABLEH_MENU1, 0, sRacine)
	END

	sFils = TreeGiveChild(ARBRE_MENU1, sRacine, tvFirst)
	WHILE sFils <> ""
		TableAddChild(TABLEH_MENU1, sRacine, sFils)
		sFils = TreeGiveChild(ARBRE_MENU1, sRacine, tvNext)
	END
ELSE
	IF TableSearchChild(COL_ARBRE1, sRacine) = -1 THEN
		TableAddChild(TABLEH_MENU1, 0, sRacine)
	END
	TableAddChild(TABLEH_MENU1, sRacine, sFeuille)
END

Event for Rollover in target Drag/Drop (dndDragOver)

// Curseur indiquant le déplacement 
DnDCursor(dndMove)

Related Examples:

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.