在VS2008中用ASP.NET AJAX实现igoogle的拖放功能

在博客园中看了Dflying Chen的文章使用ASP.NET Atlas实现拖放（Drag & Drop）效果（下） ，非常想实现此功能。于是下载了Dflying Chen的代码，但由于我用的是VS2008，由于版本的差异，导致不能直接使用，但在看过多篇文章后经过修改，终于实现了，我将完整代码贴出来，希望对使用VS2008 BETA2的程序员能有所帮助。
完整代码如下：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< %@ Page  language ="C#"  % >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title > DragAndDrop UI Example </ title >
     < style  type ="text/css" >
        body, input {font-family:Verdana; font-size: 0.7em;}
        .list1{width: 45%; float: left}
        .list2{width: 45%; float: right}
        .item{background:#fff;}
        .itemContent{padding:5px;text-align:center;}
        .itemTitle{background:#e5ecf9;font-weight:bold;cursor:move;}
        .dropCue{border:dashed 1px #ff0000;}
        .emptyList{text-align:center;}
     </ style >
   
</ head >
< body >
     < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="scriptManager"  runat ="server" >
             < Scripts >
                 < asp:ScriptReference  Assembly ="Microsoft.Web.Preview"  Name ="PreviewScript.js"   />
                 < asp:ScriptReference  Assembly ="Microsoft.Web.Preview"  Name ="PreviewDragDrop.js"   />
             </ Scripts >
         </ asp:ScriptManager >
         < div >
             <!--  Left Area  -->
             < div  id ="leftArea"  class ="list1" >
                 < div  id ="content1"  class ="item" >
                     < div  id ="content1Title"  class ="itemTitle" > Content 1 </ div >
                     < div  class ="itemContent" >
                         < asp:Login  ID ="myLogin"  runat ="server" ></ asp:Login >
                     </ div >
                 </ div >
                 < div  id ="content2"  class ="item" >
                     < div  id ="content2Title"  class ="itemTitle" > Content 2 </ div >
                     < div  class ="itemContent" >
                        Dflying's Item
                     </ div >
                 </ div >
             </ div >
             <!--  Right Area  -->
             < div  id ="rightArea"  class ="list2" >
                 < div  id ="content3"  class ="item" >
                     < div  id ="content3Title"  class ="itemTitle" > Content 3 </ div >
                     < div  id ="content3Content"  class ="itemContent" >
                         < asp:Calendar  ID ="myCalendar"  runat ="server"  BackColor ="#FFFFCC"  
                            BorderColor ="#FFCC66"  BorderWidth ="1px"  DayNameFormat ="Shortest"  
                            Font-Names ="Verdana"  Font-Size ="8pt"  ForeColor ="#663399"  Height ="200px"  
                            ShowGridLines ="True"  Width ="220px" >
                             < SelectedDayStyle  BackColor ="#CCCCFF"  Font-Bold ="True"   />
                             < SelectorStyle  BackColor ="#FFCC66"   />
                             < TodayDayStyle  BackColor ="#FFCC66"  ForeColor ="White"   />
                             < OtherMonthDayStyle  ForeColor ="#CC9966"   />
                             < NextPrevStyle  Font-Size ="9pt"  ForeColor ="#FFFFCC"   />
                             < DayHeaderStyle  BackColor ="#FFCC66"  Font-Bold ="True"  Height ="1px"   />
                             < TitleStyle  BackColor ="#990000"  Font-Bold ="True"  Font-Size ="9pt"  
                                ForeColor ="#FFFFCC"   />
                         </ asp:Calendar >
                        
                     </ div >
                 </ div >
                 < div  id ="content4"  class ="item" >
                     < div  id ="content4Title"  class ="itemTitle" > Content 4 </ div >
                     < div  id ="content4Content"  class ="itemContent" >
                         < asp:Image  ID ="Image1"  runat ="server"  ImageUrl ="http://www.nanfangdaily.com.cn/southnews/tp/jrtj/200503150657_57462.jpg"   />
                        
                     </ div >
                 </ div >
             </ div >
             < div  style ="clear: both" >
             </ div >
            
             <!--  Hide template elements  -->
             < div  style ="display:none;" >
                 <!--  DropCue Template  -->
                 < div  id ="dropCueTemplate"  class ="dropCue" >
                 </ div >
                 <!--  Empty Template  -->
                 < div  id ="emptyTemplate"  class ="emptyList" >
                    Drop content here.
                 </ div >
             </ div >
            
         </ div >
     </ form >

     < script  type ="text/xml-script" >
         < page >
             < components >
                
                 <!--  Left Area  -->
                 < control  id ="leftArea" >
                     < behaviors >
                         < dragDropList  id ="leftDragDropBehavior"  dragDataType ="HTML"  acceptedDataTypes ="'HTML'"  dragMode ="Move"  direction ="Vertical" >
                             < dropCueTemplate >
                                 < template  layoutElement ="dropCueTemplate"   />
                             </ dropCueTemplate >
                             < emptyTemplate >
                                 < template  layoutElement ="emptyTemplate"   />
                             </ emptyTemplate >
                         </ dragDropList >
                     </ behaviors >
                 </ control >
                
                 <!--  Right Area  -->
                 < control  id ="rightArea" >
                     < behaviors >
                         < dragDropList  id ="rightDragDropBehavior"  dragDataType ="HTML"  acceptedDataTypes ="'HTML'"  dragMode ="Move"  direction ="Vertical" >
                             < dropCueTemplate >
                                 < template  layoutElement ="dropCueTemplate"   />
                             </ dropCueTemplate >
                             < emptyTemplate >
                                 < template  layoutElement ="emptyTemplate"   />
                             </ emptyTemplate >
                         </ dragDropList >
                     </ behaviors >
                 </ control >
                
                 <!--  Draggable items  -->
                 < control  id ="content1" >
                     < behaviors >
                         < draggableListItem  handle ="content1Title"   />
                     </ behaviors >
                 </ control >
                 < control  id ="content2" >
                     < behaviors >
                         < draggableListItem  handle ="content2Title"   />
                     </ behaviors >
                 </ control >
                 < control  id ="content3" >
                     < behaviors >
                         < draggableListItem  handle ="content3Title"   />
                     </ behaviors >
                 </ control >
                 < control  id ="content4" >
                     < behaviors >
                         < draggableListItem  handle ="content4Title"   />
                     </ behaviors >
                 </ control >
                
             </ components >
         </ page >
     </ script >

</ body >
</ html >

特别说明的是，还在编写此代码前，一定要到http://ajax.asp.net下载ASP.NET AJAX Futures进行安装，安装成功后会发现VS2008中多出了很多的控件，再运行此代码就可以正常运行。

如果不能正常运行的，请留言，我们一起解决！！！