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

This is my first post on Stackoverflow, but I've been reading a lot of Q&A for months! Now I am stuck and I desperately need help.

Background Information: The site is at http://www.mobiuspc.com and this section is the Configurator button in my top bar navigation.
Everything is written in the latest VB.NET and ASP 3.5 flavors and I have a SQL2005 server available with my host.

Here is the bottom 'dirty dilemma of mine:
During pageload, I get a list of all the parts in my part of the table. Then I create an image object and 2 label objects for each post and put them in my fancy control. Works great so far, I can get a giant list of photos and text that match the way I like it (for now). Now - I really need a way to get the visitor to drag the image / label / label combination from the accordion to the panel (or anything really) on the right side, which is currently invisible. Once the thing being dragged hits the drop target, I would like it to trigger a function or sub that I write in VB.

From what I've seen about jquery, there seems to be a way to make an element in my webpage draggable, droppable, or whatever you have. Sample code for it - I don't quite understand, so a quickie sample would be great. I am a fast learner and can apply it from there in my project. More importantly, how do I get the objects created at runtime to drag and drop and fire my event, which I wrote in the only language I know?

This is how I create 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 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

      

The page is then loaded by all trios of my image / label / label object. Many of them. Performance is not an issue at the moment, I just want my idea to work. Idea again, one day I somehow magically "dragged" one of my created objects into the dropzone and then released the mouse so that it actually dropped, something like this would do (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 minimize my interactions with non-VB / ASP. If I can somehow just tickle the magic property on the object from my vb coding window that would be better.

Thanks! Bill

0


a source to share


1 answer


I understood that! All I had to do was make sure the cssclass is drag and drop via javascript using JQuery. Apply .draggable to the class and make sure that bit of js is on the page and not on the page. Also found out that my method of creating table formatted controls doesn't seem to work, I had to put the container pane where I needed the controls and then add them separately to the pane. Works great!



0


a source







All Articles