Atlas学习手记（18）：使用DragPanel实现拖放面板

---

　本文示例源代码或素材下载

　　主要内容

　　1．DragPanel Extender介绍

　　2．完整示例

　　一．DragPanel Extender介绍

　　前面曾经使用DragOverlayExtender来实现过拖放功能，DragPanel也可以使我们很容易的为ASP.NET面板加上拖放功能。DragPanel直接封装了Atlas中的客户端控件Sys.UI.FloatingBehavior，它为如何向已有的Behavior添加一个Extender提供了很好的示例。示例代码：

<atlasToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server">　　　　　　
　　<atlasToolkit:DragPanelProperties
　　　　TargetControlID="PanelContenter"
　　　　DragHandleID="PanelHeader" />　　　　　　
</atlasToolkit:DragPanelExtender>

　　它的属性非常简单：

属性	描述
TargetControlID	要实现拖放功能的目标Panel ID
DragHandleID	拖动处理Panel ID，当用户单击并拖动它的时候，目标控件将随着一起移动。

　　二．完整示例

　　DragPanel的使用非常简单，下面看一个简单的示例。新建WebSite后，在ASPX页面中加入：

<%@ Register Assembly="AtlasControlToolkit"
　　　　　　Namespace="AtlasControlToolkit"
　　　　　　TagPrefix="atlasToolkit" %>

　　添加两个Panel，分别用来作为目标拖动Panel和DragHandle Panel：

<div style="height: 300px; width: 150px; float: left; padding: 5px;">
<asp:Panel ID="PanelContenter" runat="server" Width="24%" Height="251px">
　　<asp:Panel ID="PanelHeader" style="cursor: move" BorderStyle="Solid" BorderWidth="1px" BorderColor="black"　runat="server" Width="134px" Height="20px">
　　　　<div style="cursor: move"><strong>Drag Me</strong></div>
　　</asp:Panel>
　　<asp:Panel BorderStyle="Solid" Width="133" BackColor="#AFC5FE" ForeColor="Black" Font-Size="small" BorderWidth="1px" BorderColor="black" ID="Panel9" runat="server" Height="150px">
　　　　 <div>这个面板可拖动！</div>
　　</asp:Panel>
</asp:Panel>
</div>

　　添加DragPanelExtender，并设置相关的参数：

<atlasToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server">　　　　　　
　　<atlasToolkit:DragPanelProperties
　　　　TargetControlID="PanelContenter"
　　　　DragHandleID="PanelHeader" />　　　　　　
</atlasToolkit:DragPanelExtender>

　　运行效果如下：

　　拖放：

本文作者:

---

« 
» 

---