使用AJAX DRAGPANEL控件

本文源于Working with DragPanel AJAX Control: ASP Alliance
自从开始做ASP.NET开发,应用到AJAX当然是少不了的,在www.asp.net中找到了AJAXCONTROLTOOLKIT,里面有很多的现成的还是free的AJAX控件,asp.net上面也有很多教学视频可以看,前两天在ASP ALLIANCE上面看到了一个哥们发的WORKING WITH 系列,还是觉得看字来的快,视频动不动就是15分钟,而且看完了感觉就忘完了,还是边看边做来的有效.这篇早下了都没有看,下午休息一下,看了,用自己的话介绍一下这个控件的用法,嘿嘿:
使用AJAXCONTROLTOOLKIT的必备条件:
1.vs2005或是VWD
2.ASP.NET 2.0 AJAX Extensions下载并安装
3.ASP.NET AJAX Control Toolkit下载并安装
4.在toolbox中新建一个tab,把ASP.NET AJAX Control Toolkit的dll加载上去,里面的控件就出来了,可以draganddrop了

好了,下面就一步一步的说吧(打字+COPY),每一步都按照原文引来,不要嫌我罗嗦哈:
1. 启动VS2005
2. 在菜单选择新建WEB SITE按键
3. 选择C#作为语言
4. 项目取名为DragPanelSample.
5. 选择网站模板为ASP.NET AJAX Control Toolkit Web Site.
6. 选择你自己喜欢的路径存放
7. 点击OK创建项目.
8. 打开默认创建的页面default.aspx
9.default.aspx中有个默认的控件,scriptmanager,简单的说,这个控件用来管理页面的客户端脚本.默认情况下,它为页面在MICROSOFT AJAX库中注册脚本,这样就使客户端脚本使用类型系统扩展(type system extensions)和支持像局部页面生成和webservice调用等特点.
10.新建一个css文件名字默认就好,然后在default.aspx中引用它,它内容如下:

.dragContainer{}{
background-color: #FFC0FF;
height: 282px;
width: 357px;
border-bottom-color: black;
}
.dragHeader{}{
background-color: #8080FF;
height: 48px;
width: 358px;
}
.dragDetail{}{
background-color: #FFC0FF;
height: 213px;
width: 357px;
}

11.添加一个PANEL控件,id是PnlContainer,代码如下:

<asp:Panel ID="PnlContainer" runat="server" cssclass="dragContainer">

12.在PnlContainer里面在创建两个panel,分别作为header和details,代码如下:

<asp:Panel ID="PnlHeader" runat="server" CssClass="dragHeader">
                    Click and Drag Here To Move ME..around the page</asp:Panel>

                <asp:Panel ID="PnlDetail" runat="server" CssClass="dragDetail">
                    Here is just some content where you can add as much text as you like<br />
                    line 1<br />
                    line 2<br />
                    Remmeber that you can add any html text here<br />
                    <br />
                </asp:Panel>

13.现在就要添加dragpanel了,在ajax control toolkit tool tab中拉一个DragPanelExtender到default.aspx页面开头,比如放在scriptmanager后面,其属性设置如下:

<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
TargetControlID="PnlContainer" DragHandleID="PnlHeader">
</ajaxToolkit:DragPanelExtender>

14.请特别注意一下,DragPanelExtender的一些属性在属性框中是看不到的,非要在source模式下才能Intellisence出来.
15.看字面意思其实就很好理解它的属性的意思了,DragHandleID,对应的就是鼠标拖拽控件的id,TargetcontrolID就是产生拖拽效果的控件,在本例中由于pnlheader和pnldetails都在产生效果的pnlcontainer中,因此三个panel都有了被拖拽的效果;
16.光是上面这样已经有拖拽的效果了,但是当鼠标左键被松开时,它们又将回到原来的位置,不爽三
17.把下面的javascript加到</body>之前,被拖拽的panels就回停留在新的位置了,这样就cool了:

<script type="text/javascript">
function setBodyHeightToContentHeight()
{
document.body.style.height = Math.max(document.documentElement.scrollHeight,
document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
</script>

好了,其实过程很简单,也不复杂,大家都能用才爽,有意见大家提哈,共同进步.