功能:
通过DragPanel的属性设置,可以让任何的ASP.NET Pane控件具备可拖拽的功能。
属性:
    
        
代码实例: <html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<head runat="server">
 <title>DragPanel</title>
    <title>DragPanel</title>    
 </head>
</head>
 <body>
<body>
 <form id="form1" runat="server">
    <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
    </asp:ScriptManager>
 <asp:Panel ID="PanelContent" runat="server"  Width="530px" BorderStyle="Ridge" BorderWidth="5px">
    <asp:Panel ID="PanelContent" runat="server"  Width="530px" BorderStyle="Ridge" BorderWidth="5px">
 <asp:Panel ID="PanelHeader" runat="server" Height="30px"
    <asp:Panel ID="PanelHeader" runat="server" Height="30px"
 BackColor="#8080FF"
                 BackColor="#8080FF"
 BorderColor="#0808FF"
                 BorderColor="#0808FF"
 BorderWidth="5px"
                 BorderWidth="5px"
 BorderStyle="Double"
                 BorderStyle="Double"
 HorizontalAlign="Center"
                 HorizontalAlign="Center"
 ToolTip="请拖曳此处"
                 ToolTip="请拖曳此处"
 style="cursor: move;">
                 style="cursor: move;">
 <div style="padding-top: 8px; color: White; font-weight: bolder;">
        <div style="padding-top: 8px; color: White; font-weight: bolder;">
 图书详细信息
          图书详细信息
 </div>
     </div>
 
     
 </asp:Panel>
    </asp:Panel>
 <asp:Panel ID="PanelBody" runat="server">
    <asp:Panel ID="PanelBody" runat="server">
 <table width="530px">
         <table width="530px">
 <tr>
              <tr>
 <td >
                <td >
 ISBN:
                  ISBN:
 </td>
                </td>
 <td>
                <td>
 790061493
                  790061493
 </td>
                </td>
 <td rowspan="5" align="right">
                <td rowspan="5" align="right">
 <asp:Image ID="Image1" runat="server"
                  <asp:Image ID="Image1" runat="server"
 ImageUrl="~/Images/imageMFC.gif" />
                             ImageUrl="~/Images/imageMFC.gif" />
 </td>
                </td>
 </tr>
              </tr>
 <tr>
              <tr>
 <td >
                <td >
 图书名称:
                  图书名称:
 </td>
                </td>
 <td>
                <td>
 深入浅出MFC(第2版)(附盘)
                  深入浅出MFC(第2版)(附盘)
 </td>
                </td>
 </tr>
              </tr>
 <tr>
              <tr>
 <td >
                <td >
 作者:
                  作者:
 </td>
                </td>
 <td>
                <td>
 侯俊杰(侯捷)
                 侯俊杰(侯捷)
 </td>
                </td>
 </tr>
              </tr>
 <tr>
              <tr>
 <td >
                <td >
 出版社:
                  出版社:
 </td>
                </td>
 <td>
                <td>
 华中理工大学出版社
                 华中理工大学出版社
 </td>
                </td>
 </tr>
              </tr>
 <tr>
              <tr>
 <td >
                <td >
 定价:
                  定价:
 </td>
                </td>
 <td>
                <td>
 80.0
                 80.0
 </td>
                </td>
 </tr>
              </tr>
 </table>
            </table>
 </asp:Panel>
    </asp:Panel>
 </asp:Panel>
    </asp:Panel>
 <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContent" DragHandleID="PanelHeader">
        <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContent" DragHandleID="PanelHeader">
 </ajaxToolkit:DragPanelExtender>
        </ajaxToolkit:DragPanelExtender>
 
    
 </form>
    </form>

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