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
a source to share
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!
a source to share