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

本文介绍如何使用 AJAX Control Toolkit 中的 DragPanelExtender 控件实现面板拖拽功能，并通过 JavaScript 代码保存拖拽位置，防止在触发服务器事件后面板跳回原位。
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>