DragPanelExtender使用
关键代码:
1 <asp:ScriptManager ID="ScriptManager1" runat="server" />
2 <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1" DragHandleID="Panel2">
3 </ajaxToolkit:DragPanelExtender>
4 <div>
5 <asp:Panel ID="Panel1" runat="server" Width="250px" style="z-index: 20;">
6 <asp:Panel ID="Panel2" runat="server" Width="100%" Height="20px"
7 BorderStyle="Solid" BorderWidth="2px" BorderColor="black">
8 <div class="dragMe">Drag Me</div>
9 </asp:Panel>
10 <asp:Panel ID="Panel3" runat="server" Width="100%" Height="250px"
11 Style="overflow: scroll;" BackColor="#0B3D73" ForeColor="whitesmoke"
12 BorderWidth="2px" BorderColor="black" BorderStyle="Solid" >
13 <div>
14 <p>This panel will reset its position on a postback or page refresh.</p>
15 <hr />
16
17 </div>
18 </asp:Panel>
19 </asp:Panel>
这个控件的用法比较简单,只要设置两个简单的属性,就可以实现拖拽功能。2 <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1" DragHandleID="Panel2">
3 </ajaxToolkit:DragPanelExtender>
4 <div>
5 <asp:Panel ID="Panel1" runat="server" Width="250px" style="z-index: 20;">
6 <asp:Panel ID="Panel2" runat="server" Width="100%" Height="20px"
7 BorderStyle="Solid" BorderWidth="2px" BorderColor="black">
8 <div class="dragMe">Drag Me</div>
9 </asp:Panel>
10 <asp:Panel ID="Panel3" runat="server" Width="100%" Height="250px"
11 Style="overflow: scroll;" BackColor="#0B3D73" ForeColor="whitesmoke"
12 BorderWidth="2px" BorderColor="black" BorderStyle="Solid" >
13 <div>
14 <p>This panel will reset its position on a postback or page refresh.</p>
15 <hr />
16
17 </div>
18 </asp:Panel>
19 </asp:Panel>
TargetControlID:要实现拖放功能的目标
Panel ID DragHandleID:拖动处理Panel ID,当用户单击并拖动它的时候,目标控件将随着一起移动。