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>
