功能:
通过DragPanel的属性设置,可以让任何的ASP.NET Pane控件具备可拖拽的功能。
属性:
代码实例:
运行结果:
图1:把pane拖到左上方。
图2:把Pane拖到右上方。
通过DragPanel的属性设置,可以让任何的ASP.NET Pane控件具备可拖拽的功能。
属性:
属性 |
描述 |
TargetControlID |
要实现拖放功能的目标Panel ID |
DragHandleID |
拖动处理Panel ID,当用户单击并拖动它的时候,目标控件将随着一起移动。 |
代码实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DragPanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="PanelContent" runat="server" Width="530px" BorderStyle="Ridge" BorderWidth="5px">
<asp:Panel ID="PanelHeader" runat="server" Height="30px"
BackColor="#8080FF"
BorderColor="#0808FF"
BorderWidth="5px"
BorderStyle="Double"
HorizontalAlign="Center"
ToolTip="请拖曳此处"
style="cursor: move;">
<div style="padding-top: 8px; color: White; font-weight: bolder;">
图书详细信息
</div>
</asp:Panel>
<asp:Panel ID="PanelBody" runat="server">
<table width="530px">
<tr>
<td >
ISBN:
</td>
<td>
790061493
</td>
<td rowspan="5" align="right">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/Images/imageMFC.gif" />
</td>
</tr>
<tr>
<td >
图书名称:
</td>
<td>
深入浅出MFC(第2版)(附盘)
</td>
</tr>
<tr>
<td >
作者:
</td>
<td>
侯俊杰(侯捷)
</td>
</tr>
<tr>
<td >
出版社:
</td>
<td>
华中理工大学出版社
</td>
</tr>
<tr>
<td >
定价:
</td>
<td>
80.0
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContent" DragHandleID="PanelHeader">
</ajaxToolkit:DragPanelExtender>
</form>
</body>
</html>
到此你完成此控件已经放置好了。但会遇到一个问题,在拖动的时候,在目标位置固定不下,因此你需要填加如下脚本来使其起作用。<head runat="server">
<title>DragPanel</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="PanelContent" runat="server" Width="530px" BorderStyle="Ridge" BorderWidth="5px">
<asp:Panel ID="PanelHeader" runat="server" Height="30px"
BackColor="#8080FF"
BorderColor="#0808FF"
BorderWidth="5px"
BorderStyle="Double"
HorizontalAlign="Center"
ToolTip="请拖曳此处"
style="cursor: move;">
<div style="padding-top: 8px; color: White; font-weight: bolder;">
图书详细信息
</div>
</asp:Panel>
<asp:Panel ID="PanelBody" runat="server">
<table width="530px">
<tr>
<td >
ISBN:
</td>
<td>
790061493
</td>
<td rowspan="5" align="right">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/Images/imageMFC.gif" />
</td>
</tr>
<tr>
<td >
图书名称:
</td>
<td>
深入浅出MFC(第2版)(附盘)
</td>
</tr>
<tr>
<td >
作者:
</td>
<td>
侯俊杰(侯捷)
</td>
</tr>
<tr>
<td >
出版社:
</td>
<td>
华中理工大学出版社
</td>
</tr>
<tr>
<td >
定价:
</td>
<td>
80.0
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContent" DragHandleID="PanelHeader">
</ajaxToolkit:DragPanelExtender>
</form>
</body>
</html>
<script type="text/javascript">
function setBodyHeightToContentHeight()
{
document.body.style.height =
Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
+ "px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
好了,到此就可以任意拖放了。function setBodyHeightToContentHeight()
{
document.body.style.height =
Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
+ "px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
运行结果:
图1:把pane拖到左上方。
图2:把Pane拖到右上方。