vb.net Using the drag and drop operation using images

Question

I'm currently trying to simplify a tool that we use at work. For this I would like to use the drag and drop method. The tool is basically like building a tower using three different kind of blocks. At the top there are the three images of the different blocks below is a flow-layout-panel. The goal is to drag in a desired order the blocks into the flow-layout-panel.

Here is a quick image that would represent the start position. (Just to be clear.)

This for me is the tricky part. I only used the drag and drop method to drop values from one text-box into another one. Now I need to copy the image-object and add it into the flow-layout-panel.

This is the method I followed to drag and drop values

Private MouseIsDown As Boolean = False

Private Sub TextBox1_MouseDown(ByVal sender As Object, ByVal e As _
System.Windows.Forms.MouseEventArgs) Handles TextBox1.MouseDown
    ' Set a flag to show that the mouse is down.
    MouseIsDown = True
End Sub

Private Sub TextBox1_MouseMove(ByVal sender As Object, ByVal e As _
System.Windows.Forms.MouseEventArgs) Handles TextBox1.MouseMove
    If MouseIsDown Then
        ' Initiate dragging.
        TextBox1.DoDragDrop(TextBox1.Text, DragDropEffects.Copy)
    End If
    MouseIsDown = False
End Sub

Private Sub TextBox2_DragEnter(ByVal sender As Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles TextBox2.DragEnter
    ' Check the format of the data being dropped.
    If (e.Data.GetDataPresent(DataFormats.Text)) Then
        ' Display the copy cursor.
        e.Effect = DragDropEffects.Copy
    Else
        ' Display the no-drop cursor.
        e.Effect = DragDropEffects.None
    End If
End Sub

Private Sub TextBox2_DragDrop(ByVal sender As Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles TextBox2.DragDrop
    ' Paste the text.
    TextBox2.Text = e.Data.GetData(DataFormats.Text)
End Sub

Now for the next step I should do the same for the images, here is my try:

Public Class Form2

    Private MouseIsDown As Boolean = False

    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) _
        Handles PictureBox1.MouseDown
        ' Set a flag to show that the mouse is down.
        MouseIsDown = True
    End Sub

    Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As _
                                   System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
        If MouseIsDown Then
            ' Initiate dragging.
            PictureBox1.DoDragDrop(PictureBox1, DragDropEffects.Copy)
        End If
        MouseIsDown = False
    End Sub

    Private Sub FlowLayoutPanel1_DragEnter(ByVal sender As Object, ByVal e As _
                                           System.Windows.Forms.DragEventArgs) Handles FlowLayoutPanel1.DragEnter
        ' Check the format of the data being dropped.
        If (e.Data.GetDataPresent(DataFormats.Text)) Then
            ' Display the copy cursor.
            e.Effect = DragDropEffects.Copy
        Else
            ' Display the no-drop cursor.
            e.Effect = DragDropEffects.None
        End If
    End Sub

    Private Sub FlowLayoutPanel1_DragDrop(ByVal sender As Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles FlowLayoutPanel1.DragDrop
        ' Paste the text.
        FlowLayoutPanel1.Text = e.Data.GetData(DataFormats.Bitmap)
    End Sub

End Class

But if I do this, and drag the picturebox1 item onto the panel, I only get the can't drop symbol.. So this is where i'm kinda stuck. Can someone please provide me with some info how to do this? Or give me some pointers?

your `DoDragDrop` initiates with a `Control` as the data to drag and drop (which does match the question Title), but you test for `DataFormats.Text` in dragenter. — Ňɏssa Pøngjǣrdenlarp, Dec 04 '15 at 17:02

Hans Passant · Accepted Answer · 2015-12-04T17:28:19.977

    ' Check the format of the data being dropped.
    If (e.Data.GetDataPresent(DataFormats.Text)) Then

That is not correct. You are now dragging a PictureBox object, it is not text so this If expression is always going to be False. You are only happy when you see a PictureBox object being dragged. Like this:

    If (e.Data.GetDataPresent(GetType(PictureBox))) Then

Same issue in your DragDrop event handler, it needs to resemble:

    Dim pb = CType(e.Data.GetData(GetType(PictureBox)))
    FlowLayoutPanel1.Controls.Add(pb)

Or you'd create a new one and assign the Image property, setting pb.Image to Nothing. Multiple ways to go about this, you need to think about the way you let the user correct mistakes.

vb.net Using the drag and drop operation using images

1 Answers1

Linked