Drag and Drop images

I built an application where you drag and drop images from one place to another.
Then user, now, wants to see the image is being dragged. For example, when you drag and you go to the drop point it shows you a rectangle with an arrow that tells yuo that you can drop it there.

Is there a way you can see what's being dragged. Take the example of the windows solitaire game where you can see the card at every moment.

Who is Participating?

Improve company productivity with a Business Account.Sign Up

LabelsoftConnect With a Mentor Commented:
That is indeed not a standard functionality from .NET. There is however a relatively easy way to implement this. It's explained here:


It's in C# sorry, but I bet you'll figure it out.
Mike TomlinsonMiddle School Assistant TeacherCommented:
Right...you either:
(1) Use a custom cursor as in Labelsoft's example
(2) Physically change the position of the "thing" during the drag.

Can you give more details about the setup of your application?
arcrossAuthor Commented:
Basically, this person wants to modify something i did long time ago to use it in a 'smartboard' to teach kids some basic maths. For example, multiplication tables dragging the solutions into different boxes, and few other similar games....
Since it is going to be used (and dragged) by little kiddos id like it to look a little more animated and also they d know at every moment what they d be dragging.
Tom BeckConnect With a Mentor Commented:
A while back I developed an application in VB for dragging photos to re-arrange them. The application accomplished your requirement of keeping images visible as you drag them. It also prevents users from dropping images on any place other than a valid drop point and locks the image into the new position so everything stays lined up. I thought it might work for you so I extracted the relevant code and made a new working sample. You will have to create three 128 x 128 pixel images and load them into ImageList1 to make this work. A simple white background image with a number in the middle would be adequate.

Note that there are two code sections, one for the form designer and one for the VB code.

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Partial Class DragAndDrop
    Inherits System.Windows.Forms.Form

    'Form overrides dispose to clean up the component list.
    <System.Diagnostics.DebuggerNonUserCode()> _
    Protected Overrides Sub Dispose(ByVal disposing As Boolean)
            If disposing AndAlso components IsNot Nothing Then
            End If
        End Try
    End Sub

    'Required by the Windows Form Designer
    Private components As System.ComponentModel.IContainer

    'NOTE: The following procedure is required by the Windows Form Designer
    'It can be modified using the Windows Form Designer.  
    'Do not modify it using the code editor.
    <System.Diagnostics.DebuggerStepThrough()> _
    Private Sub InitializeComponent()
        Me.components = New System.ComponentModel.Container
        Dim resources As System.ComponentModel.ComponentResourceManager = New System.ComponentModel.ComponentResourceManager(GetType(DragAndDrop))
        Me.Panel1 = New System.Windows.Forms.Panel
        Me.dropPoint3 = New System.Windows.Forms.Panel
        Me.dropPoint2 = New System.Windows.Forms.Panel
        Me.dropPoint1 = New System.Windows.Forms.Panel
        Me.pic3 = New System.Windows.Forms.Panel
        Me.pic2 = New System.Windows.Forms.Panel
        Me.pic1 = New System.Windows.Forms.Panel
        Me.ImageList1 = New System.Windows.Forms.ImageList(Me.components)
        Me.Panel1.AllowDrop = True
        Me.Panel1.BackColor = System.Drawing.Color.FromArgb(CType(CType(239, Byte), Integer), CType(CType(236, Byte), Integer), CType(CType(185, Byte), Integer))
        Me.Panel1.Location = New System.Drawing.Point(12, 12)
        Me.Panel1.Name = "Panel1"
        Me.Panel1.Size = New System.Drawing.Size(323, 418)
        Me.Panel1.TabIndex = 1
        Me.dropPoint3.BackColor = System.Drawing.Color.FromArgb(CType(CType(255, Byte), Integer), CType(CType(255, Byte), Integer), CType(CType(192, Byte), Integer))
        Me.dropPoint3.Location = New System.Drawing.Point(180, 278)
        Me.dropPoint3.Name = "dropPoint3"
        Me.dropPoint3.Size = New System.Drawing.Size(128, 128)
        Me.dropPoint3.TabIndex = 45
        Me.dropPoint2.BackColor = System.Drawing.Color.FromArgb(CType(CType(255, Byte), Integer), CType(CType(255, Byte), Integer), CType(CType(192, Byte), Integer))
        Me.dropPoint2.Location = New System.Drawing.Point(180, 143)
        Me.dropPoint2.Name = "dropPoint2"
        Me.dropPoint2.Size = New System.Drawing.Size(128, 128)
        Me.dropPoint2.TabIndex = 40
        Me.dropPoint1.BackColor = System.Drawing.Color.FromArgb(CType(CType(255, Byte), Integer), CType(CType(255, Byte), Integer), CType(CType(192, Byte), Integer))
        Me.dropPoint1.Location = New System.Drawing.Point(180, 9)
        Me.dropPoint1.Name = "dropPoint1"
        Me.dropPoint1.Size = New System.Drawing.Size(128, 128)
        Me.dropPoint1.TabIndex = 35
        Me.pic3.AllowDrop = True
        Me.pic3.Location = New System.Drawing.Point(14, 279)
        Me.pic3.Name = "pic3"
        Me.pic3.Size = New System.Drawing.Size(128, 128)
        Me.pic3.TabIndex = 10
        Me.pic2.AllowDrop = True
        Me.pic2.Location = New System.Drawing.Point(14, 144)
        Me.pic2.Name = "pic2"
        Me.pic2.Size = New System.Drawing.Size(128, 128)
        Me.pic2.TabIndex = 5
        Me.pic1.AllowDrop = True
        Me.pic1.Location = New System.Drawing.Point(14, 9)
        Me.pic1.Name = "pic1"
        Me.pic1.Size = New System.Drawing.Size(128, 128)
        Me.pic1.TabIndex = 0
        Me.ImageList1.ImageStream = CType(resources.GetObject("ImageList1.ImageStream"), System.Windows.Forms.ImageListStreamer)
        Me.ImageList1.TransparentColor = System.Drawing.Color.Transparent
        Me.ImageList1.Images.SetKeyName(0, "1.jpg")
        Me.ImageList1.Images.SetKeyName(1, "2.jpg")
        Me.ImageList1.Images.SetKeyName(2, "3.jpg")
        Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!)
        Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
        Me.ClientSize = New System.Drawing.Size(347, 445)
        Me.Name = "DragAndDrop"
        Me.Text = "DragAndDrop"

    End Sub
    Friend WithEvents Panel1 As System.Windows.Forms.Panel
    Friend WithEvents dropPoint3 As System.Windows.Forms.Panel
    Friend WithEvents dropPoint2 As System.Windows.Forms.Panel
    Friend WithEvents dropPoint1 As System.Windows.Forms.Panel
    Friend WithEvents pic3 As System.Windows.Forms.Panel
    Friend WithEvents pic2 As System.Windows.Forms.Panel
    Friend WithEvents pic1 As System.Windows.Forms.Panel
    Friend WithEvents ImageList1 As System.Windows.Forms.ImageList
End Class

'''VB CODE''

Public Class DragAndDrop

    Dim photos As ArrayList
    Private Dragging As Boolean = False
    Private allPanels() As Panel
    Private allDropPoints() As Panel
    Private WithEvents replacementPanel As Panel
    Private draggedPhoto As Panel = Nothing
    Private imageNumber As Integer = 0
    Private firstMove As Boolean = True
    Private locInPhoto As Point
    Private canDrop As Boolean = False
    Private curRow As Integer = 0

    Private Sub DragAndDrop_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.photos = New ArrayList
        For Each photo As Image In Me.ImageList1.Images
        Me.allPanels = New Panel() {Me.pic1, Me.pic2, Me.pic3}
        Me.allDropPoints = New Panel() {Me.dropPoint1, Me.dropPoint2, Me.dropPoint3}
    End Sub

    Private Sub AddPhotos()
        For i As Integer = 0 To Me.photos.Count - 1
            Me.allPanels(i).BackgroundImage = Me.photos.Item(i) 'Add image to panel
    End Sub

    Private Sub PicBox_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles pic1.MouseDown, pic2.MouseDown, pic3.MouseDown
        'This sub runs once when the mouse button hits the bottom of a click
        Dragging = True
        Me.replacementPanel = New Panel      'New, movable, panel to replace the one clicked on
        Dim imageNum As String = sender.Name 'Extract the panel number being dragged
        imageNum = imageNum.Substring(3)
        Me.imageNumber = CType(imageNum, Integer) - 1
        Me.draggedPhoto = allPanels(Me.imageNumber)
        Me.replacementPanel.Height = 128
        Me.replacementPanel.Width = 128
        Me.replacementPanel.BackgroundImage = Me.draggedPhoto.BackgroundImage()
        AddHandler Me.draggedPhoto.MouseMove, AddressOf PicBox_MouseMove
        AddHandler Me.draggedPhoto.MouseUp, AddressOf PicBox_MouseUp
        Me.replacementPanel.Location = Me.draggedPhoto.Location
        Me.draggedPhoto.Visible = False  'Hide the original panel 
    End Sub

    Private Sub PicBox_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        'This sub runs repeatedly as the photo is being dragged
        Dim pLoc As Point
        pLoc = Me.Panel1.PointToClient(Cursor.Position)  'Position of cursor relative to the top left corner of the main panel's borders
        If Me.firstMove Then  'If the move is just staring, get the position of the cursor relative to the dragged panel's top left corner 
            Me.locInPhoto = Me.draggedPhoto.PointToClient(Cursor.Position)
            Me.firstMove = False
        End If
        Dim loc As Point
        loc.X = pLoc.X - Me.locInPhoto.X  'adjust the replacement panel's position to reflect where it was clicked to prevent it from jumping too far from the originals's position
        loc.Y = pLoc.Y - Me.locInPhoto.Y
        If Dragging Then
            Me.replacementPanel.Location = loc
            canDrop = False
            Me.curRow = 0
            Dim curPanel As String = ""
            loc.X = loc.X + Me.locInPhoto.X  'Add back the correction made above to get the actual cursor position
            'set the row of the drop point that the cursor is currently passing over
            If loc.X > 180 Then 'then we know the image has been dragged far enough right to be over a drop point
                loc.Y = loc.Y + Me.locInPhoto.Y  'Add back the correction made above to get the actual cursor position
                Select Case loc.Y  'determine wich row the user is dragging the image to
                    Case Me.allDropPoints(0).Location.Y To (Me.allDropPoints(0).Location.Y + 128)
                        curRow = 1
                    Case Me.allDropPoints(1).Location.Y To (Me.allDropPoints(1).Location.Y + 128)
                        curRow = 2
                    Case Me.allDropPoints(2).Location.Y To (Me.allDropPoints(2).Location.Y + 128)
                        curRow = 3
                End Select
            End If
            If Not Me.curRow = 0 Then
                canDrop = True
            End If
        End If
    End Sub

    Private Sub PicBox_MouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        If Dragging Then
            Dragging = False
            RemoveHandler Me.draggedPhoto.MouseMove, AddressOf PicBox_MouseMove
            If canDrop Then 'If the cursor is over the drop point...
                Me.draggedPhoto.Visible = True 'Restore the original photo
                Me.draggedPhoto.Location = Me.allDropPoints(Me.curRow - 1).Location
                Me.allDropPoints(Me.curRow - 1).Visible = False
                Me.replacementPanel.Visible = False  'Hide the replacement
                Me.replacementPanel = Nothing
                Me.imageNumber = 0
            Else '..the cursor is not over a drop point. Undo the move.
                Me.draggedPhoto.Visible = True
                Me.replacementPanel.Visible = False
                Me.replacementPanel = Nothing
            End If
        End If
    End Sub
End Class

Open in new window

You could also try WPF by the way. The support for drag & drop and graphics are amazing.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.