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

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

主要内容

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 >

运行效果如下：

拖放：

完整示例下载

转载于:https://www.cnblogs.com/qfb620/archive/2008/03/25/1121060.html