zoukankan      html  css  js  c++  java
  • 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;  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>

    运行效果如下:

    拖放:

    完整示例下载

  • 相关阅读:
    HDU 1058 Humble Numbers
    HDU 1160 FatMouse's Speed
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1003 Max Sum
    HDU 1297 Children’s Queue
    UVA1584环状序列 Circular Sequence
    UVA442 矩阵链乘 Matrix Chain Multiplication
    DjangoModels修改后出现You are trying to add a non-nullable field 'download' to book without a default; we can't do that (the database needs something to populate existing rows). Please select a fix:
    opencv做的简单播放器
    c++文件流输入输出
  • 原文地址:https://www.cnblogs.com/qfb620/p/1121060.html
Copyright © 2011-2022 走看看