AjaxControltoolkit学习笔记—DragPanel 使用详解

 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>