Question

我有两个asp.net列表框。我想使用拖放将项目从一个列表框移动到另一个列表框。我试图使用j Query但dint似乎工作。我也将我的列表框更改为HTML选择但仍然相同。我试图添加按钮来做同样的事情。我的代码如下。任何帮助将不胜感激。

<script type="text/javascript">
    $(function () {
        $("#Setter, #Getter").sortable({
            connectWith: ".sortable"
        }).disableSelection();
    });
    $(document).ready(
   function () {
       $('#Selectone').click(
           function (e) {
               $('#Setter > option:selected').appendTo('#Getter');
               e.preventDefault();
           });

       $('#SelectAll').click(
       function (e) {
           $('#Setter > option').appendTo('#Getter');
           e.preventDefault();
       });

       $('#RemoveOne').click(
       function (e) {
           $('#Getter > option:selected').appendTo('#Setter');
           e.preventDefault();
       });

       $('#RemoveAll').click(
       function (e) {
           $('#Getter > option').appendTo('#Setter');
           e.preventDefault();
       });

   });
</script>

  <select id="Setter" runat ="server" datasourceid="LinqDataSource1" class="sortable"   multiple="true"  draggable="true" datatextfield="Section" datavaluefield="Section" dropzone="Getter" size="30" >  </select>
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="WebApplication1.insentraDataContext" EntityTypeName="" OrderBy="Section" Select="new (Section)" TableName="Sections">
</asp:LinqDataSource>
  <asp:Button ID="Selectone"  runat="server" Text=">" />
  <asp:Button ID="SelectAll"  runat="server" Text=">>" />
  <asp:Button ID="RemoveOne"  runat="server" Text="<" />
  <asp:Button ID="RemoveAll"  runat="server" Text="<<" />

Answer 1

我必须采用不同的方法来实现与数据库连接的列表框之间的拖放。我的解决方案如下。而不是有一个asp.net列表框，我创建了一个带有ul

的列表视图

<table>
    <tr>
        <td>
            <asp:ListView ID="Listview1" runat="server" DataSourceID="LinqDataSource1">
                <LayoutTemplate>
                    Unallocated Sections
    <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">
                        <%# Eval("Section")%>
                    </li>
                </ItemTemplate>
            </asp:ListView>
        </td>
        <td>Allocated Sections
             <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>

和javascript为

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

您可以根据需要选择不同的选项，但它确实完成了列表框之间的拖放操作。有关更多选项，请参阅http://jqueryui.com/sortable/

在asp.net列表框之间拖放

1 个答案: