Example One Drag And Drop Controls Using Vb.Net

2.Drag and Drop operation-simple example

2.1. Basic drag & drop operation example

Let's look at some examples, starting with simple drag and drop operation. Create a Visual Basic.net windows application and design a form with control & Drag Drop event procedure as follows

To enable drag & drop for text

1. Place two textboxes and set Allowdrop property of a second textbox to true.
2. Add the following code

Private MouseIsDown As Boolean = False 'variable declaration

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

In the above example, the MouseDown event is used to set a flag showing that the mouse is down, and then the DoDragDrop method is called in the MouseMove event. Although you could initiate the drag in the MouseDown event, doing so would create undesirable behavior: Every time a user clicks the control, the no-drag cursor would be displayed.

The DoDragDrop method takes two parameters:

Data parameter, which in this case takes the Text property of the TextBox

allowedEffects parameter, which in this case only allows copying

Also in the MouseMove event the MouseIsDown flag is set to False. Although unnecessary in this example, if you had multiple controls that support dragging you could get a run-time exception.

In the DragEnter event, the GetDataPresent method checks the format of the data being dragged. In this case it is text, so the Effect property is set to Copy, which in turn displays the copy cursor.

In the DragDrop event, the GetData method is used to retrieve the text from the DataObject and assign it to the target TextBox.

The next section provides an example of dragging a different type of data and providing support for both cutting and copying.

To enable drag and drop for a picture

Add two picturebox control to a form
Add the following code.

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As _

System.EventArgs) Handles MyBase.Load

' Enable dropping.

PictureBox2.AllowDrop = True

End Sub

Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As _

System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown

If Not PictureBox1.Image Is Nothing Then

' Set a flag to show that the mouse is down.

m_MouseIsDown = True

End If

End Sub

Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As _

System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove

If m_MouseIsDown Then

' Initiate dragging and allow either copy or move.

PictureBox1.DoDragDrop(PictureBox1.Image, DragDropEffects.Copy Or _

DragDropEffects.Move)

End If

m_MouseIsDown = False

End Sub

Private Sub PictureBox2_DragEnter(ByVal sender As Object, ByVal e As _

System.Windows.Forms.DragEventArgs) Handles PictureBox2.DragEnter

If e.Data.GetDataPresent(DataFormats.Bitmap) Then

'Check for the CTRL key.

If e.KeyState = 9 Then

e.Effect = DragDropEffects.Copy

Else

e.Effect = DragDropEffects.Move

End If

Else

e.Effect = DragDropEffects.None

End if

End sub

Private Sub PictureBox2_DragDrop(ByVal sender As Object, ByVal e As _

System.Windows.Forms.DragEventArgs) Handles PictureBox2.DragDrop

' Assign the image to the PictureBox.

PictureBox2.Image = e.Data.GetData(DataFormats.Bitmap)

' If the CTRL key is not pressed, delete the source picture.

If Not e.KeyState = 8 Then

PictureBox1.Image = Nothing

End If

End Sub

In the above example, note that the AllowDrop property for the second PictureBox control is set in the Form1_Load event. This is necessary because the AllowDrop property is not available at design time.

In the MouseDown event, the code first checks to make sure that there is an image assigned to the PictureBox; otherwise, after you moved the picture, subsequent clicks would raise an exception.

Also note that in both the DragEnter and DragDrop events the code checks to see if the CTRL key is pressed to determine whether to copy or move the picture. Why are the values different? In the DragEnter event, the left mouse button is down, resulting in a value of 8 for the CTRL key plus 1 for the left mouse button. For a list of KeyState enumerations, see DragEventArgs.KeyState Property.

Both examples so far have dealt with dragging between two controls on the same form; they would also work for dragging items between controls on different forms within an application. The next example demonstrates accepting items dropped from another application — in this case, files that are dragged from Windows Explorer.

Screen shots for the above example is as shown below

Basic drag & drop operation example step 1

Fig1: Screenshot for example1 control before being dragged to a target

Basic drag & drop operation example step 2

Fig2: Screenshot for example1 control after being dragged to a target

2.2 Downloadable zip file