您的位置：首页 > 数据库

AJAX 的DragPanelExtender 拖曳控件使用,并保存位置(此方法思路可将坐标保存到数据库)

2012-02-29 09:58 579 查看 
AJAX 的DragPanelExtender 拖曳控件使用,

注意A DragPanelExtender拖曳对象必须是Panel容器,Panel容器再可以包含其它容器
注意B 必须保证拖曳Panel容器时有足够的活动空间,否则DragPanelExtender会拖曳不动,或DragPanelExtender会拖曳松开时跳回原位置,你可以指一个足够大的DIV使用

1/从AJAX面版中(没有AJAX 面版的请下载(AjaxControlToolkit.Binary.NET35.zip)先安装它),各拖放一个,ToolkitScriptManager,DragPanelExtender,
2/在页面上,放上一个Panel,
3/设置DragPanelExtender的TargetControlID属性为Panel的ID,如:TargetControlID="Test" ,就可以拖曳了,
4/DragPanelExtender的DragHandleID属性默认不设置的时,拖曳指向的panel任务一处都可以拖动整个panel,当DragPanelExtender的DragHandleID属性设置一个控制ID的时候,
只能对该ID内的位置进行拖动整个panel,

5/此时,如果我们触发任何一个服务器按钮事件,拖曳位置变动都会跳回原始位置,我们怎么处理呢,
(1)首先,我们添加一个HiddenField隐藏服务控件,订单设置隐藏控件值value ="0",
(2)设置DragPanelExtender的BehaviorID指向一个ID(这个ID名是自定义的,并不是某个控件ID,一会会用到的)
(3)我们要写一个javascript来控制它,javascript自动看,如下
function pageLoad() {

var queryDetail = $get("<%=Test.ClientID%>");
if (queryDetail != null) {
// call the savePanelPosition when the panel is moved
$find('Drag').add_move(savePanelPosition);
var elem = $get("<%=HiddenField1.ClientID%>");
if (elem.value != "0") {
var temp = new Array();
temp = elem.value.split(';');
// set the position of the panel manually with the retrieve value
$find('<%=DragPanelExtender1.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
}
}
}

function savePanelPosition() {
var elem = $find('Drag').get_element();
var loc = $common.getLocation(elem);
var elem1 = $get("<%=HiddenField1.ClientID%>");
// store the value in the hidden field
elem1.value = loc.x + ';' + loc.y;
}

(4)在以上javascript中是可以把坐标保存起来的,

测试代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">

function pageLoad() {

var queryDetail = $get("<%=Test.ClientID%>");
if (queryDetail != null) {
// call the savePanelPosition when the panel is moved
$find('Drag').add_move(savePanelPosition);
var elem = $get("<%=HiddenField1.ClientID%>");
if (elem.value != "0") {
var temp = new Array();
temp = elem.value.split(';');
// set the position of the panel manually with the retrieve value
$find('<%=DragPanelExtender1.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
}
}
}

function savePanelPosition() {
var elem = $find('Drag').get_element();
var loc = $common.getLocation(elem);
var elem1 = $get("<%=HiddenField1.ClientID%>");
// store the value in the hidden field
elem1.value = loc.x + ';' + loc.y;
}

</script>
<form id="form1" runat="server">
<div style="width: 100%; height: 400px; background-color: Green">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Panel ID="Test" runat="server" Width="20%" Height="20px" BackColor="Blue">
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<div id="Test2">
DragPanelExtender 使用, 注意A DragPanelExtender拖曳对象必须是Panel容器,Panel容器再可以包含其它容器 注意B 必须保证拖曳Panel容器时有足够的活动空间,否则DragPanelExtender会拖曳不动,或DragPanelExtender会拖曳松开时跳回原位置,你可以指一个足够大的DIV使用
1/从AJAX面版中(没有AJAX 面版的请下载(AjaxControlToolkit.Binary.NET35.zip)先安装它),各拖放一个,ToolkitScriptManager,DragPanelExtender,
2/在页面上,放上一个Panel, 3/设置DragPanelExtender的TargetControlID属性为Panel的ID,如:TargetControlID="Test"
,就可以拖曳了, 4/DragPanelExtender的DragHandleID属性默认不设置的时,拖曳指向的panel任务一处都可以拖动整个panel,当DragPanelExtender的DragHandleID属性设置一个控制ID的时候,
只能对该ID内的位置进行拖动整个panel,
</div>
</asp:Panel>
</asp:Panel>
<asp:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Test" BehaviorID="Drag"
DragHandleID="Test2">
</asp:DragPanelExtender>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:HiddenField ID="HiddenField1" runat="server"  Value="0"/>
<div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航