DotNetWebTutor.com                                                    Link to Us

Drag and Drop
drag and drop
Drag and drop is a way to pass data between controls.
Moving controls around the form
You use 3 events to move objects

  • MouseDown
  • MouseUp
  • MouseMove

Create a variable to keep track of drag and drop mode
Private isDragging as Boolean=false
To store the location the user clicks
Private clickOffsetX as integer
Private clickOffsetY as integer
Add this code to the mouseDown event:
isDragging=true
clickOffsetX=e.x
clickOffsetY =e.y
Add this code to the stop dragging event:
isDragging=false
Add this code to the mouseMove event:
If isDragging then
controlToDrag.Left=e.x+controlToDrag.Left-clickOffsetX
controlToDrag.top=e.y+controlToDrag.top-clickOffsety
e.x and e.y give you the position of the mouse over the control controlToDrag.left and ControlToDrag.top give the distance from the top left corner of the control to the top left corner of the form
clickOffsetx and clickoffsety give the position from the controls top left corner and where the user clicked when they started to drag.
drag drop
Drag and Drop
The user clicks a control and holds down the mouse button.
The user moves the mouse over another control
If the control accepts it, the user can release the mouse and transfer the data from the first control to the second
Example:

  • Start a new project
  • Add two textboxes
  • Name then txt1 and txt2
  • Select the first textbox
  • Click on the lightningbolt icon for events
  • Double-click the dragDrop event
  • Add the txt2.DragDrop to the event, don’t forget the comma.

txt2.dragdrop

  • Add this code:

Dim txt As TextBox = DirectCast(sender, TextBox)
txt.Text = DirectCast(e.Data.GetData(DataFormats.Text), String)

  • Select the textbox in design view again
  • Open the DragEnter event

dragEnter event

  • Add txt2 to the event handler

txt2.dragEnter

  • Add the following code:

If e.Data.GetDataPresent(DataFormats.Text) Then
e.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.None
End If

  • Open the mouseDown event
  • Add txt2 to the event handler
  • Add the following code:

Dim txt As TextBox = DirectCast(sender, TextBox)
txt.SelectAll()
txt.DoDragDrop(txt.Text, DragDropEffects.Copy)

  • Select each textbox and change the AllowDrop property to true
  • Test it

directCast
DirectCast
Use it the same way as CType to convert data types.
First argument - expression to be converted
Second Argument- type top convert it to
Difference between CType and DirectCast:
DirectCast requires the run-time type of the object be the same as the specified type to convert it to
Example:
Dim a as Object=1.234
Dim B as integer=CType(a,Integer)
Dim C as integer=DirectCast(a,Integer)
In this example the CType works but the DirectCase fails
drag and drop between listboxes
Drag and Drop between listboxes:

  • Start a new project
  • Add two listboxes

ADD 2 listboxes

  • Add some information to the first listbox
  • Click the smarttag and Select Edit items

smarttag edit items

  • Add some text items to the list

String Collection Editor

  • Click OK

example

  • Select the first listbox and open the MouseDown event
  • Add this code:

ListBox1.DoDragDrop(ListBox1.SelectedItem.ToString, DragDropEffects.Move)

  • Change the AllowDrop property from both listboxes to true
  • Add the following code to the DragEnter event of the first listbox and second listbox (select them both when you open event)

e.effect=e.allowedEffect

  • Select listbox2 and add this code to the DragDrop event handler:

If ListBox2.Focused Then
e.Effect = DragDropEffects.None
Exit Sub
Else
ListBox2.Items.Add(e.Data.GetData(DataFormats.Text))
ListBox1.Items.Remove(ListBox1.SelectedItem)
End If

  • Run it

It lets you drag from listbox1 to listbox2 but not the other way around
make other listbox work
To make the other listbox work:
You already have the code for DragEnter and MouseDown you just need to make a new event handler for listbox2’s DragDrop event

  • Select listbox1 and open the dragDrop event
  • Add this code:

If ListBox1.Focused Then
e.Effect = DragDropEffects.None
Exit Sub
Else
ListBox1.Items.Add(e.Data.GetData(DataFormats.Text))
ListBox2.Items.Remove(ListBox2.SelectedItem)
End If

  • Add this line to the MouseDown event:

ListBox1.DoDragDrop(ListBox2.SelectedItem.ToString, DragDropEffects.Move)
You can also add code to make sure you have data in the listbox before you are allowed to drag it.
drag images
Drag Images

  • Start a new project
  • Add two picture controls
  • Set the image on the first picture control to an image
  • Double-click the form and add this code to configure the picturebox to accept a drop of information.

PictureBox2.AllowDrop = True

  • Add this code to the mouseDown event of the first picturebox:

Dim myPic As PictureBox = CType(sender, PictureBox)
myPic.DoDragDrop(myPic.Image, DragDropEffects.Copy)

  • Add this code to the DragEnter event of the second picturebox

If e.Data.GetDataPresent(DataFormats.Bitmap) Then
e.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.None
End If

  • Add this code to the dragDrop event of the second picturebox

Dim img As Image = CType(e.Data.GetData(DataFormats.Bitmap), Image)
PictureBox2.Image = img

drag and drop controls