Перетащите строки списка ListBox с jQuery in ASP.Net - PullRequest
Новая
       136

Перетащите строки списка ListBox с jQuery in ASP.Net

1 голос
/ 04 мая 2020

Я пытаюсь реализовать перетаскивание C# со списком.

Я наткнулся на несколько фрагментов кода на inte rnet, но ни один из них, похоже, не работает с моими потребностями.

Я хочу, чтобы вы показали мне пример кода того, как двигаться строк в 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>

1 Ответ

0 голосов
/ 04 мая 2020

Надеюсь, это поможет вам. С наилучшими пожеланиями

http://rajudasa.blogspot.com/2011/11/drag-and-drop-list-items-with-multi.html

Здесь вы найдете информацию о выборе элементов с помощью перетаскивания на веб-странице и о том, как я создавал элементы перетаскивания в listBoxes используя JQuery -UI Sortable.

На JQuery -UI Sortable Demo page, элементы списка представлены <li>, я пробовал с <li> и <td> в качестве элементов, оба не удовлетворены моим требованием. Вместо использования <li> в качестве элементов я использовал теги <div>. Одной из обязательных функций является многократное перетаскивание с использованием ctrl + mouse drag.

Пример демонстрационной страницы содержит 2 списка (источник, место назначения). Поле источника заполнено данными из JSON данных (stati c или из Asp. Net). При нажатии кнопки выбранные / удаленные элементы в поле назначения сохраняются в скрытом поле в виде строки JSON, и вы можете получить их на стороне сервера. (или в JS версии, просто заполнив текстовое поле).

Вы можете проверить демо здесь

Скачать Zip файл здесь

...