Page 1 of 1

Click and Drag Elements .NET - moving elements with mouse Rate Topic: -----

#1 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 13
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Posted 31 July 2006 - 10:39 AM

This tutorial will explain how to create a functional click & drag way to move elements in a VB.NET form. This will come in handy if you want to create a user interface that allows users to move elements of the form around.

First you will need to create a form with at least 1 element in it (label, textbox, picturebox, etc..). Once that is complete, make sure you are viewing and editing the code (in VB.NET Express 2005 right click in the form and click "view code").

We are going to need a few variable to begin with. 3 to use as "switches" (on/off or true/false in this case), 2 to hold the position of the mouse (x/y coordinates), and 2 to hold the position of the mouse where it was clicked over the element (again, x/y coordinates). This last set is to eliminate any left or right jumping of the element when clicked, and allow for a smooth click and drag flow. (for beginners this all goes in the Public Class Form1 section)

	' These will be our switches
	Dim Go As Boolean
	Dim LeftSet As Boolean
	Dim TopSet As Boolean

	' These will hold the mouse position
	Dim HoldLeft As Integer
	Dim HoldTop As Integer

	' These will hold the offset of the mouse in the element
	Dim OffLeft As Integer
	Dim OffTop As Integer



Let me explain the switches real quick. The first (Go) will be the switch that tells the system when the mouse is pressed and ready for dragging. The second (LeftSet) and third (TopSet) will tell the system whether or not we have captured the original point where the mouse was clicked.

Next we need to set our switches. They will all need to be defaulted to off when the mousebutton is UP (as in not clicked). Obviously if you aren't clicking on the object you aren't trying to move it.

Private Sub obj1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles obj1.MouseUp
		Go = False
		LeftSet = False
		TopSet = False
	End Sub


Now that they are all set, when do we need to tell the system that we are trying to move the object? When the mouse button is pressed. Since all we have to do for now is tell the system that the mouse is down, we only need to flip the first switch (Go)

Private Sub obj1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles obj1.MouseDown
		Go = True
	End Sub



Now the system knows when the mouse is clicked or not, but we need to make the element "follow" the mouse. I will explain the steps before the code

1.) We need to check if the mouse is clicked or not when the mouse is moving. We will use the first switch and an IF statement
2.) We need to find out where the mouse is right now. We will store the coordinates with the HoldLeft & HoldTop variables
3.) We need to capture the point where the mouse was clicked, but only one time! We will use the second and third switch and some IF statements
4.) Lastly we move the object to where the mouse is

Private Sub obj1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles obj1.MouseMove
		' Check if the mouse is down
		If Go = True Then

			' Set the mouse position
			HoldLeft = (Control.MousePosition.X - Me.Left)
			HoldTop = (Control.MousePosition.Y - Me.Top)

			' Find where the mouse was clicked ONE TIME
			If TopSet = False Then
				OffTop = HoldTop - sender.Top
				' Once the position is held, flip the switch
				' so that it doesn't keep trying to find the position
				TopSet = True
			End If
			If LeftSet = False Then
				OffLeft = HoldLeft - sender.Left
				' Once the position is held, flip the switch
				' so that it doesn't keep trying to find the position
				LeftSet = True
			End If

			' Set the position of the object
			sender.Left = HoldLeft - OffLeft
			sender.Top = HoldTop - OffTop
		End If
	End Sub


Notice how I used sender? This is so that only the element you click is moved. sender is a system variable that returns the name of the element that is returning values. You can use this code once and set as many objects or elements as you want to be movable.

To add another object to be movable just add objname.event to all three of the handles
- objname.MouseDown
- objname.MouseUp
- objname.MouseMove

Is This A Good Question/Topic? 3
  • +

Replies To: Click and Drag Elements

#2 ace_w1zard  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 02-October 09

Posted 02 October 2009 - 01:32 AM

I did exacltty wht the tut told me to do, and i keep on getting not defined errors, please help!
Was This Post Helpful? 1
  • +
  • -

#3 realmZeH  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 28-April 10

Posted 15 June 2010 - 02:15 PM

i found this really helpful and its a great tutorial thanks :]
Was This Post Helpful? 1
  • +
  • -

#4 ricardosms  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 73
  • View blog
  • Posts: 301
  • Joined: 02-April 10

Posted 19 January 2011 - 02:00 PM

Hi, the_hangman

I found this tutorial by accident, it is few years old, but I think is a good resourse to have. The only thing is that you have to add three functions to each element that needs to be provided with relocation capabilities and they could be several. Please see this thread:

[link]
http://www.dreaminco...__fromsearch__1
[/link]

It is a control I made. You don't need to add any function. When you have it on a form, at load time it collects all the names and controls's objects on the form and lists them on a combobox. The only thing is that is not continuous movement, but by jumps of different lenghts according to a picture. Maybe you could modify it for mouse moves.

Regards,

ricardosms

Attached File(s)

  • Attached File  Gator.zip (133.43K)
    Number of downloads: 264

Was This Post Helpful? 0
  • +
  • -

#5 ~XiX~  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 1
  • Joined: 15-June 11

Posted 15 June 2011 - 11:07 AM

I went through the code few times and drastically reduced the complexity.

Basically what ths code does is
1. When the mouse is pressed, it notes the offset between the point where the mouse clicked and the top/left of the obj
2. When the mouse moves, it moves the obj's top/left by the offset

     Dim Off As Point

    Private Sub obj1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles obj1.MouseDown
        Off.X = MousePosition.X - sender.Left
        Off.Y = MousePosition.Y - sender.Top
    End Sub

    Private Sub obj1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles obj1.MouseMove
        If e.Button = MouseButtons.Left Then
            sender.Left = MousePosition.X - Off.X
            sender.Top = MousePosition.Y - Off.Y
        End If
    End Sub


Was This Post Helpful? 2
  • +
  • -

Page 1 of 1