Saul Greenberg > courses > HCI topics > visual basic > tutorial 11

Tutorial 11:
Crazy Drag'n'Drop program

Contents:

• Download and run the program
• Program Documentation
• Build the program from scratch

Download and run the program

• Download and run ImageDrag2.zip

Extract this guy to your desktop, open the project file (called ImageDrag2.vbp) and hit play. Woh, that's tough! Check the next section for how it works.

Program Documentation

When you run the program, you get two forms that look like this:

the program window & directory listing

Now I have included a snapshot of the directory listing for this project in this screenshot. As you can see, I've included two image files. You can drag and drop them onto either form: either one at a time, or you can select both of them at once and drag'n'drop'em. Wow, fantastic, eh?!

Here's the really cool part. If you left-click drag an image on either form, you can drag and drop them to the other form, alternately creating new images as you go.

Here's the extra cool part. If you right-click drag on any image on either form, you'll see that it happily moves around and stuff. Wow.

What can we say about this program? Minimal interface, eh?! Fabulous!!

Build the program from scratch

OK, hopefully this isn't too painful, it's actually pretty straightforward I think! Way less complicated than the Database examples!!

1. Start VB up and make yourself a Standard EXE Project.
2. Once that's set, add another new form to the project using Project->Add Form (so you should end up with two forms)
3. To Form1 add:
4. one picturebox using the tool.
5. one timer using the tool and make sure it's enabled.
6. To Form2 add:
7. one picturebox using the tool.
8. Save your project *grin*.
9. Included in the zip file is a file called mMove.bas. This file is not necessary, but it's what does the moving of the controls. The original code was developed by Saul, and I've since modified it slightly. In any case, we won't worry about how it works, just copy it into your project directory and include it in your project by going Project->Add Module and hit the "existing" tab. You should see mMove.bas listed there. In any case, add it and forget it.
10. Now for the code. We'll start with the code for Form1. Double click the form and we get the stub for Form_Load(). Initialize just inits the move module, ignore it, just accept it. Fill the rest in thusly:

Private Sub Form_Load()
    Moving = False
    mMove.Initialize Timer1
    Form2.Show
End Sub

11. Now from the list of methods available for the form, choose Form_OLEDragDrop and fill it in like this:

'here's the actual drag'n'drop work
Private Sub Form_OLEDragDrop(Data As DataObject, Effect As Long, Button As Integer, Shift As Integer, X As Single, Y As Single)
    Dim i As Integer
    Dim NewIndex As Integer

    ' check to see source of drop event.
    Select Case Effect
        Case vbDropFilesFromExplorer
            'data.files is a collection of strings that are absolute paths to any files
            'dragged and dropped to the form.
            For i = 1 To Data.Files.Count
                NewIndex = Picture1.Count + 1
                
                'check to see if we've got an image file
                If ImageFileCheck(Data.Files(i)) Then
                    Load Picture1(NewIndex)
                    Picture1(NewIndex).Picture = LoadPicture(Data.Files(i))
                    Picture1(NewIndex).Visible = True
                End If
            Next i
            
        Case vbDropEffectCopy
            If Data.GetFormat(vbCFBitmap) Then
                NewIndex = Picture1.Count + 1
                Load Picture1(NewIndex)
                Picture1(NewIndex).Picture = Data.GetData(vbCFBitmap)
                Picture1(NewIndex).Visible = True
                Picture1(NewIndex).ZOrder
            End If
            
    End Select
End Sub

12. The next function (ImageFileCheck used in the in the oledragdrop method) is just a cheapie filter based on file extention.

'checks to see if we've got an image file
Function ImageFileCheck(strFileName As String) As Boolean
    Dim strExtention As String
    
    'grab the file's extention
    strExtention = Right(strFileName, 3)
    
    'check the extention for an image type
    If (strExtention = "bmp") Or (strExtention = "jpg") Or _
        (strExtention = "gif") Then
        ImageFileCheck = True
    Else
        ImageFileCheck = False
    End If
        
End Function

13. Next is the methods associated with the picturebox. The stuff to note is as follows:

• The mMove stuff is handled by the right mouse button in MouseDown, MouseMove, and MouseUp. Just include it and don't worry except that it works.
• The Drag'n'Drop crud between forms is initialized by the Picture1(Index).OLEDrag and if you don't include it, it won't do it.
• The Picture1_OLEStartDrag() thang sets up the type of data and the actual data to be included in the drag'n'drop operation.

Private Sub Picture1_MouseDown(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 1 Then
        Picture1(Index).OLEDrag
    ElseIf Button = 2 Then
        mMove.Begin Me.ActiveControl, Form1, X, Y
    End If
End Sub

Private Sub Picture1_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 2 Then mMove.InProgress X, Y
End Sub

Private Sub Picture1_MouseUp(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 2 Then mMove.EndIt
End Sub

Private Sub Picture1_OLEStartDrag(Index As Integer, Data As DataObject, AllowedEffects As Long)
    Data.SetData Picture1(Index).Picture, vbCFBitmap
    AllowedEffects = vbDropEffectCopy
End Sub

14. After that, all that's left is the Timer handler. Hehehe, there's actually a bit of a bug in this. Try resizing form2 and moving pictures around on it. If you care enough to want that fixed, let me know. Anyways, it looks like this:

Private Sub Timer1_Timer()
    mMove.ToNewPosition Me.ScaleWidth, 0
End Sub

15. That's it for Form1. The code for Form2 is literally identical except for three things:

• Omit the Form_Load method.
• Omit the Timer1_Timer method.
• In Picture1_MouseDown, change the mMove.Begin form parameter to be Form2.

And that, as they say, is that.