Drag & Drop in VB/ASP Using Controls Created During Runtime

Question

Hello all,

This is my first time posting on Stackoverflow, but I've been reading through many questions & answers for a couple months now! Now, I'm stuck and I desperately need help.

Background info: Site is located at http://www.mobiuspc.com and the section in question is the "configurator" button on my top row navigation.
Everything is written in the latest flavor of VB.NET and ASP 3.5, and I have a SQL2005 server available with my host.

Here is the down 'n dirty of my dilemma:
During pageload, I get a list of all the parts in my parts table. Then I create an image object and 2 label objects per entry and place them in my fancy accordion pane control. Works great so far, I can get a giant list of pictures and text that's aligned how I like it (for now). Now - I really need a way to be able to have a visitor drag an image/label/label combo from the accordion over to a panel (or anything really) on the right side that is currently invisible. Once the dragged thing is dropped into the drop target, I would like it to fire a function or sub that I write in VB.

From what I've seen about jquery, apparently there is a way to make an element on my webpage draggable, droppable, or what have you. The example code for it - I'm not entirely understanding so a quickie sample would be great. I'm a fast learner and can apply it from there to my project. More importantly, how do I get objects that are created during runtime to be draggable, and fire my event that I wrote in the only language that I know?

Here is how I generate my runtime objects as-is:

Public Function loadallimages()
    Dim brandholder As ArrayList = New ArrayList
    Dim partnumberholder As ArrayList = New ArrayList
    Dim modelholder As ArrayList = New ArrayList
    Dim imageinsert As Image
    Dim labelinsert1 As Label
    Dim labelinsert2 As Label
    Dim gridinsert As Table
    Dim gridrow1 As TableRow
    Dim gridrow2 As TableRow
    Dim gridrow3 As TableRow
    Dim gridcell1 As TableCell
    Dim gridcell2 As TableCell
    Dim gridcell3 As TableCell
    Dim switcher As Integer = 0

    conn.ConnectionString = connstring 'I got my fancy connection string stored elsewhere
    conn.Open()

    'Add all images to the chassis section
    inserter = "SELECT Brand,PartNumber,Model FROM Chassis" 'this is the command I'm sending to the SQL command
    sqlmagicmaker = New SqlCommand(inserter, conn) 'this is the actual sql command object, created in my declarations
    bloater = fucker.ExecuteReader 'bloater is my easy way of remembering "data reader object"
    Do While bloater.Read
        brandholder.Add(bloater.Item("Brand").ToString)
        partnumberholder.Add(bloater.Item("PartNumber").ToString)
        modelholder.Add(bloater.Item("Model").ToString)
    Loop
    bloater.Close() 'can't forget to close it!



    For i = 0 To brandholder.Count - 1
        imageinsert = New Image 'make new objects and give them ID's later
        labelinsert1 = New Label
        labelinsert2 = New Label
        If switcher = 0 Then 'this is my ghetto way of getting 3 "chunks" of data in a row
            gridinsert = New Table
            gridrow1 = New TableRow
            gridrow2 = New TableRow
            gridrow3 = New TableRow
        End If
        gridcell1 = New TableCell
        gridcell2 = New TableCell
        gridcell3 = New TableCell
        gridcell1.CssClass = "configgridcell" 'just sets the width so it looks nice
        gridcell2.CssClass = "configgridcell"
        gridcell3.CssClass = "configgridcell"

        imageinsert.ImageUrl = ".\Images\Chassis\" + brandholder(i) + "{}" + partnumberholder(i) + ".jpg"
        imageinsert.ID = brandholder(i) + "{}" + partnumberholder(i)
        labelinsert1.Text = brandholder(i)
        labelinsert2.Text = modelholder(i)
        imageinsert.AlternateText = "No Image"

        gridrow1.Cells.Add(gridcell1) 'create a table and add controls
        gridrow1.Cells(switcher).Controls.Add(imageinsert)
        gridrow2.Cells.Add(gridcell2)
        gridrow2.Cells(switcher).Controls.Add(labelinsert1)
        gridrow3.Cells.Add(gridcell3)
        gridrow3.Cells(switcher).Controls.Add(labelinsert2)
        If switcher = 2 Then
            gridinsert.Rows.Add(gridrow1) 'compile all the rows and put into a table
            gridinsert.Rows.Add(gridrow2)
            gridinsert.Rows.Add(gridrow3)
            AccordionPane1.ContentContainer.Controls.Add(gridinsert) 'dump the table in the appropriate accordion pane
        End If
        switcher = switcher + 1
        If switcher = 3 Then switcher = 0 'do it all over again

    Next
    brandholder.Clear()
    partnumberholder.Clear()
    modelholder.Clear()
    switcher = 0
    'then we go onto other sections, which basically do the exact same thing to other accordions

Then the page loads with all my image/label/label object trio's. Lots of them. Performance is not an issue at this point, I just want my idea to work. The idea again, is once I somehow magically "drag" one of my created objects into a dropzone, then let go of the mouse to make it actually drop, something like this will get executed (pseudocode):

Public Function fire_the_great_event()
  x = the id of the element that just got dropped
  'do work here
  'take that element id, figure out what it is, and ask the database for more help
  'depending on what the database says, start deleting un-needed image/label/label's
End Function

Help of any kind would be greatly appreciated! If at all possible, I want to keep my interaction with non-VB/ASP to a minimum. If I can somehow just slap a magical property on an object from my vb coding window, that would be best.

Thanks! Bill

Answer 1

I figured it out! All I had to do was make sure the cssclass was draggable via javascript using Jquery. Apply .draggable to the class, and make sure that this bit of js is in the and not of the page. Also learned that my method of creating controls in a table format does not seem to work, I had to put a container panel where I wanted the controls, then add them individually to the panel. Works great!