时间: 2020-11-21|62次围观|0 条评论

前面曾经使用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提供了很好的示例。示例代码:

Atlas学习手记(18):使用DragPanel实现拖放面板插图
<
atlasToolkit:DragPanelExtender 
ID
="DragPanelExtender1"
 runat
="server"
>
            
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图    

<
atlasToolkit:DragPanelProperties 
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图        

TargetControlID
="PanelContenter"
 
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图        DragHandleID

="PanelHeader"
 
/>
            
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图

</
atlasToolkit:DragPanelExtender
>

它的属性非常简单:

属性

描述

TargetControlID

要实现拖放功能的目标Panel ID

DragHandleID

拖动处理Panel ID,当用户单击并拖动它的时候,目标控件将随着一起移动。

二.完整示例

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

Atlas学习手记(18):使用DragPanel实现拖放面板插图1
Atlas学习手记(18):使用DragPanel实现拖放面板插图2
<%
Atlas学习手记(18):使用DragPanel实现拖放面板插图3
@ Register Assembly="AtlasControlToolkit" 
Atlas学习手记(18):使用DragPanel实现拖放面板插图4
Atlas学习手记(18):使用DragPanel实现拖放面板插图4            Namespace
="AtlasControlToolkit" 
Atlas学习手记(18):使用DragPanel实现拖放面板插图4
Atlas学习手记(18):使用DragPanel实现拖放面板插图5            TagPrefix
="atlasToolkit" 

%>

添加两个Panel,分别用来作为目标拖动PanelDragHandle Panel

Atlas学习手记(18):使用DragPanel实现拖放面板插图
<
div 
style
="height: 300px; width: 150px; float: left; padding: 5px;"
>

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

<
asp:Panel 
ID
="PanelContenter"
 runat
="server"
 Width
="24%"
 Height
="251px"
>

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

<
asp:Panel 
ID
="PanelHeader"
 style
="cursor: move"
 BorderStyle
="Solid"
 BorderWidth
="1px"
 BorderColor
="black"
  runat
="server"
 Width
="134px"
 Height
="20px"
>

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

<
div 
style
="cursor: move"
><
strong
>
Drag Me
</
strong
></
div
>

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

</
asp:Panel
>

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

<
asp:Panel 
BorderStyle
="Solid"
 Width
="133"
 BackColor
="#AFC5FE"
 ForeColor
="Black"
 Font-Size
="small"
 BorderWidth
="1px"
 BorderColor
="black"
 ID
="Panel9"
 runat
="server"
 Height
="150px"
>

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

<
div
>
这个面板可拖动!
</
div
>

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

</
asp:Panel
>

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

</
asp:Panel
>

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

</
div
>

添加DragPanelExtender,并设置相关的参数:

Atlas学习手记(18):使用DragPanel实现拖放面板插图
<
atlasToolkit:DragPanelExtender 
ID
="DragPanelExtender1"
 runat
="server"
>
            
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图    

<
atlasToolkit:DragPanelProperties 
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图        

TargetControlID
="PanelContenter"
 
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图        DragHandleID

="PanelHeader"
 
/>
            
Atlas学习手记(18):使用DragPanel实现拖放面板插图
Atlas学习手记(18):使用DragPanel实现拖放面板插图

</
atlasToolkit:DragPanelExtender
>

运行效果如下:

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

拖放:

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

完整示例下载:http://files.cnblogs.com/Terrylee/DragPanelExtenderDemo.rar

转载于:https://www.cnblogs.com/Terrylee/archive/2006/08/30/Atlas_DragPanel_Extender.html

原文链接:https://blog.csdn.net/weixin_30342827/article/details/97571468

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《Atlas学习手记(18):使用DragPanel实现拖放面板
   

还没有人抢沙发呢~