DragPanel控件 - 爱码网

功能：
通过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>

到此你完成此控件已经放置好了。但会遇到一个问题，在拖动的时候，在目标位置固定不下，因此你需要填加如下脚本来使其起作用。

function setBodyHeightToContentHeight()
>

    好了，到此就可以任意拖放了。
运行结果：
        图1：把pane拖到左上方。
         DragPanel控件

图2：把Pane拖到右上方。
DragPanel控件