Drag and Drop Programming Example

(Child's Word-Picture Match Game)

Drag and Drop Overview

As a Windows user, you have undoubtedly used drag and drop techniques to copy or move files from one folder to another, to delete a file by dragging it to the recycle bin, and to perform actions in various application programs. The drag-and-drop features in Visual Basic allow you to incorporate this functionality in the programs you develop.

The action of holding a mouse button down and moving a control is called dragging, and the action of releasing the button is called dropping. A control can work as a source or as a destination of a drag-and-drop operation.

To incorporate drag and drop functionality in your VB programs, you use a handful of properties, events, and methods. The following are used in the sample program:

Properties

The AllowDrop property of a control is Boolean value that gets or sets a value indicating whether the control can accept data that the user drags onto it.

The Effects property of the event arguments of a number of drag-and-drop events can be used to specify the effects (visual appearance) of a drag-and-drop operation.

Events

The DragEnter event occurs when the user first drags the mouse cursor over the destination control during a drag-and-drop operation.

The GiveFeedback event occurs when a drag-and-drop operation is started. With the GiveFeedback event, the source of a drag event can modify the appearance of the mouse pointer in order to give the user visual feedback during a drag-and-drop operation.

The DragDrop event occurs when a drag-and-drop operation is completed.

Method

The DoDragDrop method starts a drag-and-drop operation.

Sample Program

The sample program presented in this topic is a child's game where the objective is to match a picture to its corresponding word.

When the program runs, a splash screen is briefly displayed:

The main screen then displays, presenting the user with 10 pictures in a column on the left, and 10 words in a column on the right. Empty slots appear next to each word. The user's task is to drag the picture on the left to the slot next to the matching word on the right.

Screen shot of play in progress – the player has dragged some of the pictures on the left to the appropriate spot on the right:

When done, the player clicks "Check Score", and the program evaluates the results. A red "X" is placed next to wrong answers; a green check is placed next to correct answers. The yellow label near the top right of the screen appears indicating the percent correct and the number of tries so far.

The players clicks the "Reset" button, which causes the wrong items to be returned back to their respective slots on the left (and causes the Reset button to disappear).

The player corrects his mistakes and clicks  "Check Score" once more. (This time all answers are correct. At this point, the user would either start a new game or exit.)

Download the VB project code for the sample program here.