Jquery 在2个列表框和数据库更新之间拖放

我想为web应用程序用户实现一个工具，用于将项目从列表框中拖到另一个列表框中。每次拖放后都需要更新sql表。我在谷歌上搜索了D&D并找到了一些解决方案，但我不知道哪一个是最好的？而且我也不知道正确的方法。我必须用哪一种？jquery、Ajax或其他插件？ 如果有人能给我一条完成这项任务的途径，我将不胜感激

编辑： 我发现我必须使用ListView而不是Listbox，因为我需要服务器端控制

编辑

---

我通过谷歌搜索stackoverflow.com和其他网络日志完成了上述任务。我找到了不同的方法。终于完成了。我发布了这个答案，对于未来可能需要这个解决方案的人来说

1-Html代码：

    <div class="drag_container">
    <asp:ListView ID="ListView1" runat="server" Style="width: 200px;">
        <LayoutTemplate>
            <ul id="tempdd" class="connectedSortable">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <InsertItemTemplate>
        </InsertItemTemplate>
        <ItemTemplate>
            <li class="ui-state-default" id='<%# Eval("id")%>'><%# Eval("id")%> +_+ <%#Eval("Name")%></li>
        </ItemTemplate>
    </asp:ListView>


    <asp:ListView ID="ListView2" runat="server" Style="width: 200px;">
        <LayoutTemplate>
            <ul id="tempdd1" class="connectedSortable">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <InsertItemTemplate>
        </InsertItemTemplate>
        <ItemTemplate>
            <li class="ui-state-highlight" id='<%# Eval("id")%>'><%# Eval("id")%> +_+ <%#Eval("Name")%></li>
        </ItemTemplate>
    </asp:ListView>

</div>

5-Webservice方法：

    <WebMethod()> _
Public Function SaveDragDropItem(ByVal ItemId As Integer, Source As String, Destination As String) As Integer
    Dim oDragDrop As New DragDrop_BL ' DragDrop_BL is a class in Business layer. The method save dragged item in Database
    SaveDragDropItem = oDragDrop.SaveDragDropItem(ItemId, Source, Destination)
    oDragDrop = Nothing
End Function

7-DL：

请原谅我英语不好。如果有人需要任何关于上述代码的评论或描述，我很乐意提供帮助

更新： 要使用单个请求保存数据库中所有可排序列表的更改，必须将javascript部分更改为以下代码：

        var dragged = null;
    var parent = null;
    var destination = null;
    var inserterId = null;
    var list1, list2;
    $(function () {
        $("#tempdd, #tempdd1").sortable({
            connectWith: ".connectedSortable",
            placeholder: "ui-state-highlight",
            forcePlaceholderSize: true,
            start: function (e, ui) {
                // modify ui.placeholder however you like
                ui.placeholder.html("Drop here!");
            },
            receive: function (event, ui) {

                list1 = new Array();
                list2 = new Array();
                $("#tempdd >li").each(function () {
                    list1.push($(this).attr("id"));
                });
                $("#tempdd1 >li").each(function () {
                    list2.push($(this).attr("id"));
                });
            },
            remove: function (event, ui) {
                if (ui.target == event.target) alert("Error!");
            }
        }).disableSelection();


        $(document).ready(function () {
            $("#btnUpdate").click(function (e) {
                e.preventDefault();
                //, Source: 'tempdd', Destination: 'tempdd1' 
                var serve = JSON.stringify({ Listf: list1.toString(), Lists: list2.toString(), Source: 'tempdd', Destination: 'tempdd1' });
                console.log(serve.toString());
                $.ajax({
                    type: "POST",
                    url: "/WebServices/GeneralWebService.asmx/SaveDragDropItem",
                    data: serve,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        //alert("s");
                        location.reload(true);
                    },
                    error: function (xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message);
                    }
                });

            });
        });
    })

---

这是一个行之有效的解决方案。@Rudi tnx。我知道，但我想找出不同的解决方案，然后从中选择一个。我想我的问题很清楚。如果您认为不清楚，可能是因为我的英语知识。要使用单个请求将可排序列表中的所有更改保存到db中，您必须将javascript部分更改为以下代码：

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    Dim oDragDrop As New DragDrop_BL ' DragDrop_BL is a class in Business layer.

    Dim dt As DataTable = oDragDrop.GetDataFirst()

    ListView1.DataSource = dt
    ListView1.InsertItemPosition = IIf(dt.Rows.Count = 0, InsertItemPosition.LastItem, InsertItemPosition.None)

    ListView1.DataBind()

    dt = oDragDrop.GetDataSecond()
    ListView2.DataSource = dt
    ListView2.InsertItemPosition = IIf(dt.Rows.Count = 0, InsertItemPosition.LastItem, InsertItemPosition.None)
    ListView2.DataBind()


End Sub

    <WebMethod()> _
Public Function SaveDragDropItem(ByVal ItemId As Integer, Source As String, Destination As String) As Integer
    Dim oDragDrop As New DragDrop_BL ' DragDrop_BL is a class in Business layer. The method save dragged item in Database
    SaveDragDropItem = oDragDrop.SaveDragDropItem(ItemId, Source, Destination)
    oDragDrop = Nothing
End Function

    Function SaveDragDropItem(ItemId As Integer, Source As String, Destination As String) As Integer
    Dim oDragDrop_DL As New DragDrop_DL
    SaveDragDropItem = oDragDrop_DL.SaveDragDropItem(ItemId, Source, Destination)
    oDragDrop_DL = Nothing
End Function

    Function SaveDragDropItem(ItemId As Integer, Source As String, Destination As String) As Integer
    Dim cm As SqlCommand = New SqlCommand
    Dim cn As SqlConnection = New SqlConnection
    Dim p As SqlParameter = Nothing
    Dim da As SqlDataAdapter = New SqlDataAdapter
    Dim dt As DataTable = Nothing

    Dim strSQL As String = String.Empty
    Dim Description As String = String.Empty


    strSQL = "SELECT * FROM [dbo].[" + Source + "] Where id= " & ItemId

    cn.ConnectionString = ConnectionString
    cn.Open()
    cm.CommandText = strSQL
    cm.Connection = cn
    da.SelectCommand = cm
    dt = New DataTable
    da.Fill(dt)
    cn.Close()

    Try
        strSQL = ""
        strSQL = " INSERT INTO  dbo.[" + Destination + "] "
        strSQL &= " ([name], [email], [address]) "
        strSQL &= " VALUES "
        strSQL &= " (@name, @email, @address); Select @Ident = SCOPE_IDENTITY(); "
        strSQL &= " Delete dbo.[" + Source + "] Where id= " & ItemId


        p = New SqlParameter("name", SqlDbType.NVarChar, 100)
        p.Value = dt.Rows(0)("name")
        cm.Parameters.Add(p)
        p = New SqlParameter("email", SqlDbType.NVarChar, 100)
        p.Value = dt.Rows(0)("email")
        cm.Parameters.Add(p)
        p = New SqlParameter("address", SqlDbType.NVarChar, 1000)
        p.Value = dt.Rows(0)("address")
        cm.Parameters.Add(p)


        p = New SqlParameter("Ident", SqlDbType.Int)
        p.Direction = ParameterDirection.Output
        cm.Parameters.Add(p)

        cn.ConnectionString = Me.ConnectionString
        cn.Open()
        cm.CommandText = strSQL
        cm.Connection = cn
        cm.Transaction = cn.BeginTransaction
        cm.ExecuteNonQuery()
        SaveDragDropItem = cm.Parameters("Ident").Value
        If cm.Transaction IsNot Nothing Then cm.Transaction.Commit()


    Catch ex As SqlException
        If cm.Transaction IsNot Nothing Then cm.Transaction.Rollback()
    Catch ex As System.Exception
        If cm.Transaction IsNot Nothing Then cm.Transaction.Rollback()
        Throw New System.Exception("Error In " & Me.ToString() & "-->" & ex.Message)
    Finally
        cn.Close()
        cn.Dispose()
        cm.Dispose()
    End Try
End Function

        var dragged = null;
    var parent = null;
    var destination = null;
    var inserterId = null;
    var list1, list2;
    $(function () {
        $("#tempdd, #tempdd1").sortable({
            connectWith: ".connectedSortable",
            placeholder: "ui-state-highlight",
            forcePlaceholderSize: true,
            start: function (e, ui) {
                // modify ui.placeholder however you like
                ui.placeholder.html("Drop here!");
            },
            receive: function (event, ui) {

                list1 = new Array();
                list2 = new Array();
                $("#tempdd >li").each(function () {
                    list1.push($(this).attr("id"));
                });
                $("#tempdd1 >li").each(function () {
                    list2.push($(this).attr("id"));
                });
            },
            remove: function (event, ui) {
                if (ui.target == event.target) alert("Error!");
            }
        }).disableSelection();


        $(document).ready(function () {
            $("#btnUpdate").click(function (e) {
                e.preventDefault();
                //, Source: 'tempdd', Destination: 'tempdd1' 
                var serve = JSON.stringify({ Listf: list1.toString(), Lists: list2.toString(), Source: 'tempdd', Destination: 'tempdd1' });
                console.log(serve.toString());
                $.ajax({
                    type: "POST",
                    url: "/WebServices/GeneralWebService.asmx/SaveDragDropItem",
                    data: serve,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        //alert("s");
                        location.reload(true);
                    },
                    error: function (xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message);
                    }
                });

            });
        });
    })