这个项目演示了如何在列表视图中使用jQuery拖拽,这个代码示例包括两个ListView控件,用户可以拖动、排序和移动.控制项目从一个到另一个。这个示例可以用在许多领域,您可以创建一个在线购物应用程序,它会给客户更好的感受.
首先我们来创建一个模拟的数据集合我们以两个xml文件作为我们的"数据库":
ListView1.xml文件数据:
1 <?xml version="1.0" encoding="utf-8" ?> 2 <root> 3 <data open="1">element 1</data> 4 <data open="1">element 2</data> 5 <data open="1">element 3</data> 6 <data open="1">element 4</data> 7 <data open="1">element 5</data> 8 <data open="1">element 6</data> 9 <data open="1">element 7</data> 10 </root>
ListView2.xml文件数据:
1 <?xml version="1.0" encoding="utf-8" ?> 2 <root> 3 <data open="1">element 8</data> 4 <data open="1">element 9</data> 5 <data open="1">element 10</data> 6 <data open="1">element 11</data> 7 <data open="1">element 12</data> 8 <data open="1">element 13</data> 9 <data open="1">element 14</data> 10 </root>
因为示例基于JqueryUi实现我们在aspx页面中需要引入JqueryUi的资源文件
1 <link href="JQuery/jquery-ui.css" rel="stylesheet" type="text/css" /> 2 <script src="JQuery/jquery-1.4.4.min.js" type="text/javascript"></script> 3 <script src="JQuery/jquery-ui.min.js" type="text/javascript"></script>
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSASPNETDragItemInListView.Default" %> <!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> <link href="JQuery/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="JQuery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="JQuery/jquery-ui.min.js" type="text/javascript"></script> <style type="text/css"> #sortable1, #sortable2 { list-style-type:none; border-right: #669999 2px solid; padding-right: 5px; border-top: #669999 2px solid; padding-left: 5px; float: left; padding-bottom: 0px; margin: 3px; border-left: #669999 2px solid; width: 100px; padding-top: 5px; border-bottom: #669999 2px solid } #sortable1 li, #sortable2 li { border-right: #000 1px solid; padding-right: 2px; border-top: #000 1px solid; padding-left: 2px; font-size: 10px; margin-bottom: 5px; padding-bottom: 2px; border-left: #000 1px solid; width: 94px; cursor: pointer; padding-top: 2px; border-bottom: #000 1px solid; font-family: verdana, tahoma, arial; background-color: #eee } </style> <script type="text/javascript"> $(function () { $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); $(document).ready(function () { $("li").dblclick(function () { $(this).closest('li').remove(); }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:Label ID="Label1" runat="server" Text="Please drag items in ListView control to another, you can also sort items by drag item to right positon. Double click one item to drop it from the ListView control."></asp:Label><br/> <div> <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <ul id="sortable1" class="connectedSortable"> <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder> </ul> </LayoutTemplate> <ItemTemplate> <li class="ui-state-default" ><%# Eval("value") %></li> </ItemTemplate> </asp:ListView> <asp:ListView ID="ListView2" runat="server"> <LayoutTemplate> <ul id="sortable2" class="connectedSortable"> <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder> </ul> </LayoutTemplate> <ItemTemplate> <li class="ui-state-highlight" ><%# Eval("value2") %></li> </ItemTemplate> </asp:ListView> </div> </form> </body> </html>
后台代码:
protected void Page_Load(object sender, EventArgs e) { // Bind two xml data file to ListView control, actually you can change the "open" property to "0", // In that way, it will not display in ListView control. XmlDocument xmlDocument = new XmlDocument(); using (DataTable tabListView1 = new DataTable()) { tabListView1.Columns.Add("value", Type.GetType("System.String")); xmlDocument.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListView1.xml"); XmlNodeList xmlNodeList = xmlDocument.SelectNodes("root/data[@open='1']"); foreach (XmlNode xmlNode in xmlNodeList) { DataRow dr = tabListView1.NewRow(); dr["value"] = xmlNode.InnerText; tabListView1.Rows.Add(dr); } ListView1.DataSource = tabListView1; ListView1.DataBind(); } XmlDocument xmlDocument2 = new XmlDocument(); using (DataTable tabListView2 = new DataTable()) { tabListView2.Columns.Add("value2", Type.GetType("System.String")); xmlDocument2.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListView2.xml"); XmlNodeList xmlNodeList2 = xmlDocument2.SelectNodes("root/data[@open='1']"); foreach (XmlNode xmlNode in xmlNodeList2) { DataRow dr = tabListView2.NewRow(); dr["value2"] = xmlNode.InnerText; tabListView2.Rows.Add(dr); } ListView2.DataSource = tabListView2; ListView2.DataBind(); } }