C# 在ASP.Net中使用jQuery拖放列表框行_C#_Drag And Drop

C# 在ASP.Net中使用jQuery拖放列表框行

C# 在ASP.Net中使用jQuery拖放列表框行,c#,drag-and-drop,C#,Drag And Drop,我正在尝试用listbox实现C拖放我在网上遇到过一些代码片段，但似乎没有一个能满足我的需要我希望您向我展示一个如何在ListBox中移动行的示例代码下面是我的代码谢谢 .cs .aspx 希望这能帮助你。致意在这里，您可以找到有关在网页上通过拖放选择项目的信息，以及我如何使用JQuery UI Sortable在列表框中创建可拖放项目的信息在jQueryUISortable演示页面上，列表项由表示，我尝试使用和作为项，它们都不满足我的要求。我使用了标记，而不是作为项目使用。所需功

我正在尝试用listbox实现C拖放

我在网上遇到过一些代码片段，但似乎没有一个能满足我的需要

我希望您向我展示一个如何在ListBox中移动行的示例代码

下面是我的代码

谢谢

.cs

.aspx

希望这能帮助你。致意

在这里，您可以找到有关在网页上通过拖放选择项目的信息，以及我如何使用JQuery UI Sortable在列表框中创建可拖放项目的信息

在jQueryUISortable演示页面上，列表项由表示，我尝试使用和作为项，它们都不满足我的要求。我使用了标记，而不是作为项目使用。所需功能之一是，使用ctrl+鼠标拖动进行多选拖放

示例演示页面包含两个列表框源、目标。源框中填充了来自JSON datastatic或来自Asp.Net的项。单击按钮后，在“目标”框中选择/删除的项目作为JSON字符串存储在隐藏字段中，您可以在服务器端检索它们。或者在JS版本中，只需填写文本区域

你可以查一下

下载

public partial class DragDrop : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string constr = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;
            string query = "SELECT * FROM City LIMIT 10;";

            using (MySqlConnection con = new MySqlConnection(constr))
            {
                using (MySqlCommand cmd = new MySqlCommand(query))
                {
                    using (MySqlDataAdapter sda = new MySqlDataAdapter())
                    {
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        using (DataSet ds = new DataSet())
                        {
                            sda.Fill(ds);
                            ListBox1.DataSource = ds.Tables[0];
                            ListBox1.DataTextField = "Name";
                            ListBox1.DataValueField = "Name";
                            ListBox1.DataBind();
                        }
                    }
                }
            }
        }
    }

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
    <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script type="text/javascript">
        $(function () {
            $(".drag_drop_grid").sortable({
                items: 'tr:not(tr:first-child)',
                cursor: 'crosshair',
                connectWith: '.drag_drop_grid',
                axis: 'y',
                dropOnEmpty: true,
                receive: function (e, ui) {
                    $(this).find("tbody").append(ui.item);
                }
            });
            $("[id*=ListBox2] tr:not(tr:first-child)").remove();
        });
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListBox ID="ListBox1" runat="server"
                    SelectionMode="Multiple"
                    Height="100"
                    Width="100"
                    Font-Names="Verdana"
                    EnableViewState="true"></asp:ListBox>

                <asp:ListBox ID="ListBox2" runat="server"
                    Height="100" 
                    Width="100"
                    Font-Names="Verdana"></asp:ListBox>

            </div>
        </form>
    </body>
</html>