Drag and Drop Example

These instructions will build an example program that looks like this:

We create a couple of pictures and first make them draggable with the mouse.  When you drag a picture over top of the picture in the top right corner, the dragged picture will disappear and be EATEN!

Download the code by clicking on the Zip file.

Instructions for Creating the Example:

  1. Start Visual Studio from the Start menu.
  2. Click on the New Project button in the bottom of the screen.
  3. Select Visual Basic Projects, and Windows Application.  In the Name box give your project a name.
  4. Layout your form like this:

There are three picture boxes.  I placed an image in each using the Image property in the Properties toolbar.  The picture boxes on the left are named DragPictureBox1 and DragPictureBox2.  The picture box on the right is named PictureBox1.

  1. We will use an already-created class to handle the dragging functionality.  To add this class to your project, right click on your project's name in the Solution Explorer, choose Add in the menu that appears, then select Add Existing Item.

  1. Select MouseMove.vb from it's saved location (you will have to grab it from this example's zip file if you don't already have it).

7. Add the following code to your form to create an object of the MouseMove class:

 ' create an object of our MouseMove class
Dim mMove As New MouseMove()

8. Add a timer widget to your form, from the Toolbox.

It will appear on the bottom of your design window.

9. While we are dragging objects around, it is the timer that makes the picture box move underneath of our mouse.  Double click on the Timer and add this code:

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
    ' move the drag object to a new position
    mMove.ToNewPosition()
End Sub
 

10. Double click on your Form to create a Form1_Load sub routine.  Add the following code to it to initialize our timer when the program starts.


Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    ' intialize the timer for drag and drop
    mMove.Initialize(Timer1)
End Sub

11. Create three mouse event handlers for the picture boxes you want to drag around.  Use the Handles keyword to link each picture box to the event handlers.

When a person presses the left mouse button down on the picture box, dragging will begin.  The MouseDown event handler will call a routine in the MouseMove class to begin the movement of your object.

Private Sub PictureBox_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles DragPictureBox1.MouseDown, DragPictureBox2.MouseDown

    If e.Button = MouseButtons.Left Then mMove.Begin(sender, e.X, e.Y)
End Sub
 

When a person releases the left mouse button from the picture box, dragging will stop.  The MouseUp event handler will call a routine in the MouseMove class to stop the movement of your object.

Private Sub PictureBox_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles  DragPictureBox1.MouseUp, DragPictureBox2.MouseUp

    If e.Button = MouseButtons.Left Then mMove.EndIt()
End Sub
 

The MouseMove event handler will call a routine in the MouseMove class to notify it that the object is still be moved.  We also call a CheckDrop function to see if the object we are moving has crossed the drop location (the picture in the top right of our window).

Private Sub PictureBox_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles DragPictureBox1.MouseMove, DragPictureBox2.MouseMove

    If e.Button = MouseButtons.Left Then mMove.InProgress(e.X, e.Y)

    ' see if the top left corner of the object is inside the drop object
    If CheckDrop(sender.Left, sender.Top) = True Then
        ' make the object disappear
        sender.Visible = False
    End If
End Sub

12. Add the following code to create the CheckDrop function.  It returns true if the object we are moving has come over top of the picture in the top right corner of the window.

Private Function CheckDrop(ByVal x As Integer, ByVal y As Integer) As Boolean
' check if top left corner is inside the drop object
    If x > PictureBox1.Left And x < PictureBox1.Left + PictureBox1.Width Then
        If y > PictureBox1.Top And y < PictureBox1.Top + PictureBox1.Height Then
            CheckDrop = True
        End If
    End If
End Function

13.  You should now be able to drag around the two leftmost picture boxes.  Look out for the picture box on the right - it will make them disappear!