AjaxControltoolkit学习笔记—DragPanel 使用详解

最新推荐文章于 2018-09-04 10:17:06 发布

原创最新推荐文章于 2018-09-04 10:17:06 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#server #asp #asp.net #div #float

本文介绍如何使用DragPanel控件轻松实现ASP.NET面板的拖放功能。通过设置TargetControlID和DragHandleID属性，指定要拖动的目标控件及拖动时的触发控件，即可使面板具备拖放能力。

DragPanel控件可以很容易的为ASP.NET面板实现拖放功能。它的属性非常简单：

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

示例代码：

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

完整示例：

<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" mce_Style="cursor: move" BorderStyle="Solid" BorderWidth="1px" BorderColor="black" runat="server" Width="134px" Height="20px"> <div style="cursor: move" mce_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> <atlasToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"> <atlasToolkit:DragPanelProperties TargetControlID="PanelContenter" DragHandleID="PanelHeader" /> </atlasToolkit:DragPanelExtender>