jQuery实现基于ListView的拖拽功能

这个项目演示了如何在列表视图中使用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();
            }
        }