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.

(NOTE: This article is not yet complete. More general information will go here.)

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.)

Designing the Sample Program

Icons Used

The pictures used for word-matching comes from an icon set called "Kid Icons", obtained from the site http://www.iconfactory.com. A subset of the icon set, shown below, is included in the download.

The program uses a handful of other icons from custom icon sets. These are included in the download as well.

(NOTE: This article is not yet complete. More information about building the app will go here.)

Download the VB project code for the example above here.