Блог

Главная - Вопросы по программированию - Перетаскивание внутри 2 списка в Asp.Net

Перетаскивание внутри 2 списка в Asp.Net

#javascript #jquery #asp.net #asp.net-ajax

#javascript #jquery #asp.net #asp.net-ajax

Вопрос:

Я хочу реализовать функциональность перетаскивания в 2 списка / поля со списком в Asp.Net. Я выберу и перетащу 1 элемент из listbox1 и перенесу его в Listbox2. Итак, с чего мне следует начать?

Доступен ли какой-либо плагин Jquery?

Спасибо

Рик Джексон

Ответ №1:

В сети доступно множество плагинов, но вы можете достичь этого с помощью java script.Я создал образец приложения в asp.net .Проверьте это и дайте мне знать, если у вас возникнут какие-либо сомнения.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ST.aspx.cs" Inherits="ST" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        var d;
        function drag(objSource) {
            this.select = objSource;
        }

        function drag.prototype.drop(objDest) {
            if (!this.dragStart) return;
            this.dest = objDest;

            var o = this.option.cloneNode(true);
            this.dest.appendChild(o);
            this.select.removeChild(this.option);
        }

        function drag.prototype.setIndex() {
            var i = this.select.selectedIndex;

            //i returns -1 if no option is "truly" selected
            window.status = "selectedIndex = "   i;
            if (i == -1) return;

            this.option = this.select.options[i];
            this.dragStart = true;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListBox ID="one" runat="server" onmousedown="d = new drag(this);" onmouseup="d.drop(this.form.two);"
            onmouseout="if (typeof d != 'undefined') d.setIndex();">
            <asp:ListItem Text="Opt1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Opt2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Opt3" Value="3"></asp:ListItem>
        </asp:ListBox>
        <asp:ListBox ID="two" runat="server">
            <asp:ListItem Text="Opt1" Value="1"></asp:ListItem>
            <asp:ListItem Text="Opt2" Value="2"></asp:ListItem>
            <asp:ListItem Text="Opt3" Value="3"></asp:ListItem>
        </asp:ListBox>
    </div>
    </form>
</body>
</html>

Комментарии:

1. Я не смог заставить этот пример работать. Я на .net 4.0.

Ответ №2:

Я использую эти два отличных плагина для перетаскивания. У них есть много готовых к использованию примеров:

http://threedubmedia.com/code/event/drag

http://threedubmedia.com/code/event/drop

Ответ №3:

Вот как я этого добился. Данные поступают из базы данных, и я использую listview для отображения списка.

 <table>
    <tr>
        <td>
            <asp:ListView ID="Listview1" runat="server" DataSourceID="LinqDataSource1"  >
                <LayoutTemplate>
                    Unallocated Sections 
                    <asp:Label ID="Setter Count" runat="server"></asp:Label>
    <ul class="sortable" draggable="true" id="Setter" style="overflow: scroll; empty-cells: hide; height: 500px; width: 200px; border: solid  1px; background: #b6b6b6;"  >
        <li id="Li1" runat="server" draggable="true" style="user-select: element;"  >
            <asp:PlaceHolder ID="PlaceHolder1" id-="itemPlaceholder" runat="server" ></asp:PlaceHolder>
        </li>

    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <li id="Li2" runat="server" title="Drag to Allocate sections" >
                        <%# Eval("Section")%>
                    </li>
                </ItemTemplate>
            </asp:ListView>
        </td>
        <td>Allocated Sections
            <asp:Label ID="GetterCount" runat ="server"></asp:Label>
             <ul class="sortable" draggable="true" id="Getter" style="overflow: scroll; height: 500px; width: 200px; border: solid  1px; background: #fff;">
                 <li style="color: red;"></li>
             </ul>
        </td>
    </tr>
</table>

Используемый jQuery выглядит следующим образом:

 <script>

    $(function () {
        $("#Setter,#Getter").sortable({
            connectWith: ".sortable"
        }).selectable();
    });

</script>

Я надеюсь, что это поможет. Для получения дополнительных опций вы можете проверить jQuery UI: сортируемый.