Ajax控件之DrapPanel
1.首先拖放一个层HTML/DIV
2.拖放一个标准/Panel到DIV,把Panel的width设置成100%,用作鼠标的拖动
3拖入第三个Panel以第二个Panel中width设置成100%,再设置一下样式
1. 当鼠标放到第二层的时候(也就是那个小点的层)会改变鼠标的形状
2. 拖放DragPanel控件,绑定Panel1,整个Panel1也会随着拖动(那个最大的Panel)
5.修改源: <cc1:dragpanelextender id="DragPanelExtender1" runat="server" targetcontrolid="Panel1" DragHandleID ="Panel2"></cc1:dragpanelextender>
这里添加了DragHandleID=”Panel2”这时意思是对Panel2进行拖放
3. 出现的问题:开始拖放时拖了这后会,又返回原位了,原因是应该添加一个脚本定位到界面中
脚本如下:
<script type="text/javascript">
//将拖后的Panel的高度进行赋值
function setOrientation()//这里不会执行
{//在这两个数中选择大的一个数,赋值给height
document.body.style.height=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+"px";
}
setOrientation();// 这里才会执行
$addHandler(window,"resize",setOrientation);将事件处理程序与事件进行关联
</script>
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax控件之DrapPanel</title>
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<div style="width: 200px; height: 304px">
<asp:Panel ID="Panel1" runat="server" Height="334px" Width="276px">
<asp:Panel ID="Panel2" runat="server" Height="50px" Style="font-weight: bold; cursor: move;
color: #cc66cc; background-color: #00ccff" Width="100%">
请拖动我试试</asp:Panel>
<asp:Panel ID="Panel3" runat="server" Height="286px" Style="font-weight: bold; color: #ffff99;
background-color: #ff6699" Width="100%">
</asp:Panel>
</asp:Panel>
</div>
</div>
<cc1:dragpanelextender id="DragPanelExtender1" runat="server" targetcontrolid="Panel1" DragHandleID ="Panel2"></cc1:dragpanelextender>
<script type="text/javascript">
//将拖后的Panel的高度进行赋值
function setOrientation()//这里不会执行
{//在这两个数中选择大的一个数,赋值给height
document.body.style.height=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+"px";
}
setOrientation();// 这里才会执行
$addHandler(window,"resize",setOrientation);将事件处理程序与事件进行关联
</script>
</form>
</body>
</html>
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
