在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷，所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装，ASP.NET AJAX (Atlas) 自然也不例外。

其中第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>

效果如下：

[1] [2] 下一页