在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中多出了很多的控件，再运行此代码就可以正常运行。
如果不能正常运行的，请留言，我们一起解决！！！
