Beginning Visual Basic - Project 4

Dragging and Dropping with the Mouse

The Fourth Project

In your fourth Visual Basic project, you will modify the 3rd Project. Instead of pointing and clicking on the form to move an Image, you will change it so that you point at an Image with the mouse then click and drag it to a new location. When you drop the Image it will stay at the new location.

Begin by selecting Open Project under the File menu, and open project 3 (Project3.vbp) from last week. You need to save the Project3 Form (FRM) file and Project (VBP) file with different names, here’s how:

• View your project 3 form, then drop down the File menu and choose Save frmProj3 As... In the dialog that appears change the name of the FRM file from frmProj3.frm to frmProj4.frm, then click the Save button.
• Drop down the File menu again and choose Save Project As... change the name of the VBP file from Project3.vbp to Project4.vbp, then click Save.

Now you’re working on Project 4, you’re original Project 3 files will be unchanged. Make these changes to the following Properties of the Form:

• Change the Caption property to Project 4
• Change the Name of the form to frmProj4

Select Project3 Properties on the Project dropdown menu. Make sure the General tab is selected and set these options:

In the Startup Object combobox make sure frmProj4 is selected (it should be by default). In the Project Name textbox type Project4. In the Project Description textbox type the following: Option buttons enable you to drag and drop images around the form. Leave all other settings at their defaults and click the OK button.

You already have all of the Controls on the Form that you will need to do this project. Now use the Project 4 - Properties/Procedures Table (at the end of this document) and set the DragIcon properties of the Images as shown. Also enter the Code shown in the Event Procedure section into the designated Event Procedures. Then continue on with the bulleted paragraph below.

• After deleting all of the code from the Form_MouseDown procedure, you added 3 lines of code to the Click event procedures of optCircles, optCarved, and optStraw.

imgCircles.DragMode = 1
imgCarved.DragMode = 0
imgStraw.DragMode = 0

The code above is from the optCircles_Click event procedure. By setting the DragMode property of the imgCircles control to 1, the imgCircles control can now be dragged automatically. By setting the DragMode properties of the imgCarved and imgStraw controls to 0 those controls cannot be dragged. Depending upon which Option Button is selected, only one of the Images can be dragged at a time.

After setting the DragMode of a control to 1, you can drag it. If you run the program now, notice that when you drag an image, the mouse cursor changes to the icon image that you specified in the DragIcon property of the image.  When you drop the control it doesn't automatically move to where you dropped it—The code in the Form_DragDrop procedure handles that part. There are 3 parameters passed by the operating system to the Form_DragDrop procedure:

Source As Control The value of this parameter indicates which Image was dropped.

X As Single, Y As Single
These variables contain the coordinates of the mouse location at the time the mouse button was released. Remember from the last project—A Single precision variable is a floating point number (which can have decimal value) that is 4 bytes long, an integer is just 2 bytes long (the size in bytes determines how big a number can fit in the variable—the more bytes the bigger the number can be).

You will use the values of X and Y to place the Image where you dropped it on the form with the Move method:

Source.Move  X – Source.Width / 2, Y – Source.Height / 2

In the above code, the value of Source is the Image control that was dropped. Because the X and Y coordinates indicate the upper left corner of the Image, you need to shift the Image to the left by half its Width and up by half its Height so that it will appear closer to where the mouse is pointing when it’s dropped (try it without the – Source.Width / 2, and – Source.Height / 2 and see what happens).

Save your program and run it. Click on any of the 3 option buttons (Circles, Carved, or Straw). Now click and drag the Image which matches the selected Option button.

That completes this project.

Recommended Enhancements

• If you added an optAll option button in project 3, make it work in this version of the project. When selected, you should be able to drag any image and drop it (they don’t all have to move together).
  
• Did you notice how when you're dragging an image (the mouse cursor changes to match the image because of its DragIcon property), the original image just sits there and doesn't actually move until you drop it? This spoils the illusion that the user is actually dragging it (in fact, they are not really dragging it at all, since the image doesn't really move until it's dropped). To complete the illusion that the user is actually dragging the image, you should hide the original image while it's being dragged. And then unhide it (in the DragDrop event procedure) after it's been dropped and moved.

• Note: What happens if you've hidden an image while it's being dragged and the user drags it right off of the form and drops it? Since the Form_DragDrop event procedure is not triggered in this case, the image will not be un-hidden. It will appear to the user as if the image was dragged right off the form into oblivion. How do you prevent the user from dragging an image off the form? The Form_DragOver event procedure is passed a State parameter by the operating system (remember that the DragOver event procedure of the form is triggered as the user is dragging the image). You can examine the value of the State parameter of the Form_DragOver event procedure to determine if the user is about to drag an image off of the form's surface (get VB help on State-by getting help on the DragOver event procedure). You can then make the image visible before it's dragged off of the form.
  

Beginning Visual Basic - Project 4

Properties/Procedures Table

(Download the required 3 Icon files for this project by clicking here.)
This downloads a self-extracting archive named begvb4-ico.exe. Just double-click on it after downloading it to extract the 3 small Icon files that it contains (Circles.ico, Carved Stone.ico, Straw Mat.ico).

Properties (all properties set in the previous project remain the same except the Form’s. Set the DragIcon property of the 3 Images as shown)

Event Procedures (only those procedures that must be modified or added are listed)