Atlas学习手记(18):使用DragPanel实现拖放面板

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

 

主要内容

1DragPanel 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,分别用来作为目标拖动PanelDragHandle 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://files.cnblogs.com/Terrylee/DragPanelExtenderDemo.rar

posted @ 2006-08-30 09:32  TerryLee  阅读(3788)  评论(10编辑  收藏  举报