Terry's blog

Focus on bigdata and cloud.

博客园 首页 新随笔 联系 订阅 管理
功能:
    通过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>
    到此你完成此控件已经放置好了。但会遇到一个问题,在拖动的时候,在目标位置固定不下,因此你需要填加如下脚本来使其起作用。
  <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>
    好了,到此就可以任意拖放了。
 运行结果:
        图1:把pane拖到左上方。
        
    图2:把Pane拖到右上方。
    

posted on 2007-11-01 17:31  王晓成  阅读(1359)  评论(0编辑  收藏  举报