拖放 使用运行时创建的控件插入 VB/ASP

Question

这是我第一次在 Stackoverflow 上发帖，但我已经阅读了很多问题和答案。 现在已经有几个月的答案了！ 现在，我陷入困境，迫切需要帮助。

背景资料： 站点位于 http://www.mobiuspc.com，相关部分是“配置器”按钮在我的顶行导航上。
一切都是用最新版本的 VB.NET 和 ASP 3.5 编写的，并且我的主机上有一个可用的 SQL2005 服务器。

这是我的困境的根源：
在页面加载期间，我会得到零件表中所有零件的列表。 然后，我为每个条目创建一个图像对象和 2 个标签对象，并将它们放置在我精美的手风琴窗格控件中。 到目前为止效果很好，我可以获得一个巨大的图片和文本列表，这些列表与我喜欢的方式一致（目前）。 现在 - 我真的需要一种方法，能够让访问者将图像/标签/标签组合从手风琴拖到当前不可见的右侧面板（或任何真正的东西）上。 一旦拖动的东西被放入放置目标中，我希望它能够触发我在 VB 中编写的函数或子函数。

从我对 jquery 的了解来看，显然有一种方法可以使我的网页上的元素可拖动、可放置或您拥有的其他元素。 它的示例代码 - 我不完全理解，所以快速示例会很棒。 我学得很快，可以将其应用到我的项目中。 更重要的是，如何使在运行时创建的对象可拖动，并触发我用我所知道的唯一语言编写的事件？

以下是我按原样生成运行时对象的方法：

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

然后页面加载所有图像/标签/标签对象三重奏。 其中很多。 此时性能不是问题，我只是希望我的想法能够发挥作用。 这个想法再次是，一旦我以某种方式神奇地“拖动”我创建的对象之一到放置区，然后放开鼠标使其真正放置，类似这样的事情将被执行（伪代码）：

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

任何类型的帮助都会很大赞赏！ 如果可能的话，我希望将与非 VB/ASP 的交互保持在最低限度。 如果我能以某种方式从我的 vb 编码窗口中为对象添加一个神奇的属性，那就最好了。

谢谢！ 账单

Answer 1

我想到了！ 我所要做的就是确保 cssclass 可以使用 Jquery 通过 javascript 进行拖动。 将 .draggable 应用到类中，并确保这段 js 位于页面中而不是页面中。 还了解到我以表格格式创建控件的方法似乎不起作用，我必须将容器面板放在我想要控件的位置，然后将它们单独添加到面板中。 效果很好！