在ASP.Net中使用jQuery拖拽ListBox行。

问题描述 投票:0回答:1

我正在尝试用列表框实现 C# 拖放。

我在互联网上找到了一些代码片段,但似乎都不能满足我的需求。

我希望你能告诉我一个如何在ListBox中移动行的示例代码。

我的代码如下。

我的代码如下,谢谢

enter image description here

.cs

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();
                        }
                    }
                }
            }
        }
    }

.aspx

<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>
c# drag-and-drop
1个回答
1
投票

希望这能帮助你。

http:/rajudasa.blogspot.com201111drag-and-drop-list-items-with-multi.html。

在这里,你会发现关于在网页上通过拖放选择项目的信息,以及我如何使用JQuery-UI Sortable在listBoxes中创建可拖放项目。

在JQuery-UI Sortable演示页面上,列表项被表示为 "列表"。<li>我试着用 <li><td> 作为项目,它们都不符合我的要求。而不是使用 <li> 作为项目,我用 <div> 标签。其中一个必要的功能是,多选拖放使用的是 ctrl + mouse drag.

示例演示页面包含2个Listboxes(源,目标)。源框中的项目来自JSON数据(静态或来自Asp.Net)。点击按钮后,目标框中被选中的项目以JSON字符串的形式存储在一个隐藏字段中,你可以在服务器端取回它们。(或者在JS版本中,只需填写一个文本区域)。

你可以查看 演示

下载 Zip文件在这里

© www.soinside.com 2019 - 2024. All rights reserved.