[IT168技术文档]在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷，所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装，ASP.NET AJAX (Atlas) 自然也不例外。本文将总结并简要分析ASP.NET AJAX (Atlas) 中拖放功能的6种不同的实现方法，希望能够帮助朋友们选出最适合实际需求的方法。
其中第1到第4种方案，在我的《ASP.NET Ajax程序设计——第I卷：服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit》一书中有详细介绍（4月出版），本文中的代码和图示也节选自该书。第5第6种方案，在我的《ASP.NET 2.0 Ajax程序设计——第II卷：客户端Microsoft AJAX Library》一书中将有详细介绍（暂定7月出版）。
不过纵观这些解决方案，我很遗憾的发现，要么是使用简单，可定制能力差，要么就是可定制能力强，但使用起来要写很多代码。希望ASP.NET AJAX (Atlas) 团队能够再接再厉，努力把这个重要功能做得更好。或者我有哪种方法漏掉了，也请朋友们帮忙补充一下。
[1] 使用服务器端DragOverlayExtender或客户端DragOverlayBehavior
服务器端的DragOverlayExtender就是靠着客户端DragOverlayBehavior而实现的，前者是后者在服务器端的组件化封装，所以我们将二者放在一起讨论。
这个“拖放”功能很简单，其实这只是个“拖拽”，而没有“投放”。也就是说，你可以随意将某个Panel在页面中拖来拖去，不过却没有什么固定的地方可以“投放”，就像在Windows桌面上拖放某个窗口的位置一样——其实用处不大，也没有提供什么可定制能力。但它使用起来非常简单，也支持将Panel的位置保存在Profile中。
下面是一段DragOverlayExtender的示例代码，至于DragOverlayBehavior的用法，请查看DragOverlayExtender页面生成的HTML代码：
<asp:Login ID="floatLogin" BackColor="white"
BorderStyle="Solid" BorderColor="black"
runat="server">
</asp:Login>
<asp:DragOverlayExtender ID="DragOverlayExtender2"
Enabled="true" TargetControlID="floatLogin"
runat="server" />
效果如下：
[2] 使用服务器端DragPanel
DragPanel是ASP.NET AJAX Control Toolkit中的一个扩展器控件。其功能基本与DragOverlayExtender和DragOverlayBehavior一样，且同样可以保存Panel的位置信息至Profile中。不同之处在于，DragOverlayExtender和DragOverlayBehavior的拖拽实现方式中，鼠标放在整个Panel的任何部分都可以开始拖拽，而DragPanel在进行拖拽时，只有鼠标放在指定的DragHandle（类似于Windows窗口的标题栏部分）中才能开始拖拽。
对于DragHandle的扩展性和实用性，同样不敢恭维。
下面是一段示例代码：
<asp:Panel ID="floatPanel" CssClass="floatPanel" runat="server">
<asp:Panel ID="floatPanelHandle" CssClass="handle" runat="server">
窗口的拖动
</asp:Panel>
<div class="content">
在Windows中，对窗口的拖动似乎成了我们习以为常的事情。
………………
………………
Window窗口的表现行为一样。
</div>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="dpe" TargetControlID="floatPanel"
DragHandleID="floatPanelHandle" runat="server">
</ajaxToolkit:DragPanelExtender>
效果如下：
[3] 使用服务器端ReorderList
ASP.NET AJAX Control Toolkit中的ReorderList控件将在页面中呈现出一个由数据绑定自动生成的条目列表。用户可以通过鼠标拖动某一项来直接改变该列表中条目彼此之间的相对位置关系，且在拖动的过程中，ReorderList控件提供了丰富的、可定制的视觉效果。当用户在某个位置放开鼠标之后，ReorderList控件也将同样会自动通知与其绑定的数据源控件，以Ajax的异步或整页回送的同步方式更新服务器端数据。
ReorderList控件的使用比较简单（服务器端控件），功能也相当的丰富，扩展能力也不错。不过仍称不上最灵活，比如我们想把条目在多个ReorderList之间拖放，那么就没办法实现了——因此，不要指望它能实现WebPart那样的功能。
下面是一段示例代码：
<ajaxToolkit:ReorderList ID="musicList" CssClass="musicList"
DragHandleAlignment="Left" PostBackOnReorder="false"
DataSourceID="musicDataSource" DataKeyField="Id"
SortOrderField="Order" runat="server">
<ItemTemplate>
<ajaxToolkit:Rating ID="rating" runat="server"
CssClass="rating" StarCssClass="ratingStar"
FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"
CurrentRating='<%# Bind("Rating") %>' MaxRating="5"
ReadOnly="true">
</ajaxToolkit:Rating>
</ItemTemplate>
<ReorderTemplate>
<div class="dragDue">
Drop Here!
</div>
</ReorderTemplate>
<DragHandleTemplate>
<asp:Label ID="lbTitle" CssClass="dragHandle"
ToolTip="Drag Me!" runat="server" Text='<%# Bind("Name") %>'>
</asp:Label>
</DragHandleTemplate>
</ajaxToolkit:ReorderList>
效果挺酷的：
