CODEWITHSUNDEEP
vb.net
Rick n Truckee
Rick n Truckee

Reputation: 31

coding drag drop images on web page

About a month ago, I got some wonderful help from Idle_Mind in developing a visual basic desktop application whereby children could drag & drop images (pictureboxes) in the correct order. I've displayed the code that Idle_Mind provided below. It works beautifully and is enjoyed by the students.

Now, I'm trying to recreate the application on a web site. I'm using Visual Web Developer 2008 Express. Using the same code in the "Code Behind" creates lots of errors. It appears that Image controls don't have the same drag/drop properties.

Should I be trying to create these drag/drop behaviors from Visual Basic in the "code behind" or should I be trying to accomplish this with html? The Visual Web Developer uses Visual Basic.net and XHTML 1.0 Transitional (I believe)

As always, Thanks!

Public Class Form1

    Private Source As PictureBox = Nothing

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        For Each PB As PictureBox In Me.Controls.OfType(Of PictureBox)()
            PB.AllowDrop = True
            AddHandler PB.MouseMove, AddressOf PBs_MouseMove
            AddHandler PB.DragEnter, AddressOf PBs_DragEnter
            AddHandler PB.DragDrop, AddressOf PBs_DragDrop
            AddHandler PB.DragOver, AddressOf PBs_DragOver
        Next
    End Sub

    Private Sub PBs_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        Dim PB As PictureBox = DirectCast(sender, PictureBox)
        If Not IsNothing(PB.Image) AndAlso e.Button = Windows.Forms.MouseButtons.Left Then
            Source = PB
            PB.DoDragDrop(PB.Image, DragDropEffects.Copy Or DragDropEffects.Move)
        End If
    End Sub

    Private Sub PBs_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs)
        If e.Data.GetDataPresent(DataFormats.Bitmap) Then
            If My.Computer.Keyboard.CtrlKeyDown Then
                e.Effect = DragDropEffects.Copy
            Else
                e.Effect = DragDropEffects.Move
            End If
        Else
            e.Effect = DragDropEffects.None
        End If
    End Sub

    Private Sub PBs_DragOver(sender As Object, e As DragEventArgs)
        If e.Data.GetDataPresent(DataFormats.Bitmap) Then
            If My.Computer.Keyboard.CtrlKeyDown Then
                e.Effect = DragDropEffects.Copy
            Else
                e.Effect = DragDropEffects.Move
            End If
        Else
            e.Effect = DragDropEffects.None
        End If
    End Sub

    Private Sub PBs_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs)
        Dim PB As PictureBox = DirectCast(sender, PictureBox)
        PB.Image = e.Data.GetData(DataFormats.Bitmap)
        If e.Effect = DragDropEffects.Move Then
            If Not (PB Is Source) Then
                Source.Image = Nothing
            End If
        End If
    End Sub

End Class

Upvotes: 0

Views: 637

Answers (1)

David
David

Reputation: 218808

A web application isn't a desktop application, it's a completely different technology stack.

The code-behind in this case is running entirely server-side and can't interact with the user interface in realtime. You'd want to look into implementing this functionality in JavaScript.

Fortunately, things like drag and drop functionality have widely used plugins to help. Take a look at the jQuery UI plugins, for example. Or interact.js. (See the demos on their website for what kind of functionality you'd be looking for.) Or even just the MDN documentation.

It's not going to be as simple as copying and pasting code. But there are a lot of resources to be found online to help you implement the functionality.

Upvotes: 1

Related Questions