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>
这个控件的用法比较简单,只要设置两个简单的属性,就可以实现拖拽功能。
<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>TargetControlID:要实现拖放功能的目标
Panel ID DragHandleID:拖动处理Panel ID,当用户单击并拖动它的时候,目标控件将随着一起移动。
浙公网安备 33010602011771号