在Asp.Net中拖放2列表框內的2個列表框

我想在Asp.Net中的2列表/組合框中實現拖放n拖放功能.I將從列表框1中選擇並拖動1個項目並將其拖放到列表框2上。那麼我該如何開始？在Asp.Net中拖放2列表框內的2個列表框

是否有任何JQuery插件可用？

感謝

裏克·傑克遜

來源

2011-05-04 Rahul Jain

我使用拖放這兩個偉大的插件。他們有很多準備使用的樣本：

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

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

來源

2011-05-04 16:39:09 morgar

有很多網絡上可用的插件，但你可以通過使用Java script.I實現創建了一個示例應用程序在asp.net.Check出來，讓我知道你是否有任何疑問。

<%@ 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>

來源

2011-05-04 16:52:15

我無法得到這個例子的工作。我在.net 4.0上。 – MikeTeeVee 2011-12-12 19:43:20

這就是我實現它的方式。數據來自數據庫，我使用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: Sortable。

來源

2013-05-06 23:34:34

在Asp.Net中拖放2列表框內的2個列表框

回答

相關問題