locked
How to Keep a Drag Panel in Place Between Postbacks? RRS feed

  • Question

  • User-1334042570 posted

    I've implemented a draggable panel using the AJAX Control Toolkit and following this article.  However, it won't stay in place between postbacks.  I looked at the JavaScript code he provided and it didn't seem relevant to the task at hand or am I incorrect?  So I went searching around and found some useful Javascript on this thread.  But I keep on getting a null error on this line:  $find('DragPanelBID').add_move(onMove);     One problem may be because I'm using a Master Page.  But I'm not JavaScript expert so I'm not sure.

    Any ideas and/or is there a simpler way to keep the panel in place if dragged elsewhere from its starting position?

    Robert W.

     

    Thursday, January 31, 2008 10:07 PM

Answers

  • User2050624116 posted

    You need to store the position somewhere where you can read it after returning from the postback, such as in a cookie.

     

    Example:

    function pageLoad(){
      UpdateHelpWindowState();
    }

    function UpdateHelpWindowState()
    {
      //check if the drag panel position is stored...
      var positionCookie = getCookie('helpWindowPos');
      if (positionCookie != null)
      {
        var windowPos = positionCookie.split(',');
        var moveToLocation = new Sys.UI.Point(new Number(windowPos[0]), new Number(windowPos[1]));
        var dpeHelpWindow = $find('dpeHelpWindow');
        if (dpeHelpWindow != null)
        {
          dpeHelpWindow.set_location(moveToLocation);
        }
      }

      //track drag panel movements
      var dpeHelpWindow = $find('dpeHelpWindow');
      if (dpeHelpWindow != null)
      {
        dpeHelpWindow.add_move(HelpWindow_Move);
      }
    }

    function HelpWindow_Move()
    {
       var el = $get('pnlHelpWindow');
       var newLocation = $common.getLocation(el);
       setCookie('helpWindowPos', newLocation.x + ',' + newLocation.y);
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2008 2:19 AM
  • User583989486 posted

    Hi Rmdw,

    You should first store its position to a cookie(just as Kristofer said on his reply) or to HiddenFields before postback. When pageLoad, move it in the right position.  For example,

    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="storePosition();">Force Postback</asp:LinkButton>

    <script type="text/javascript" language="javascript">
               function pageLoad(){
                   if($get("xPosition").value>0 && $get("yPosition").value>0){
                        var finalLocation = new Sys.UI.Point($get("xPosition").value,$get("yPosition").value);
                        $find('DragPanelBID').set_location(finalLocation);
                    }
               }         
               function storePosition(){
                    var el = $find('DragPanelBID').get_element();
                    var newLocation = $common.getLocation(el);
                    $get("xPosition").value = newLocation.x;
                    $get("yPosition").value = newLocation.y;
                }
            </script>

    Best regards,

    Jonathan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2008 3:43 AM
  • User2050624116 posted

    You need to update "dpeHelpWindow" and "pnlHelpWindow" in the script so it matches your object names, and you also need the definitions for the getCookie and setCookie functions.

     

    I.e.:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="testpage.aspx.cs" Inherits="testpage" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
           
            <div style="height:100px">
              <asp:LinkButton ID="LinkButton1" runat="server">Force Postback</asp:LinkButton>
            </div>
           
            <div style="height: 300px; width: 250px; float: left; padding: 5px;">
                <asp:Panel ID="Panel6" runat="server" Width="250px" Style="z-index: 20;">
                     <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px" BorderStyle="Solid"
                        BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">
                            Drag Me</div>
                    </asp:Panel>
                    <asp:Panel ID="Panel8" runat="server" Width="100%" Height="250px" Style="overflow: scroll;"
                        BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" BorderColor="black"
                        BorderStyle="Solid">
                        <div>
                            <p>
                                This sample uses javascript to reset its showing position when it is out of the limit area.</p>
                            <hr />
                        </div>
                    </asp:Panel>
                </asp:Panel>
            </div>
            <cc1:DragPanelExtender ID="DragPanelExtender1" BehaviorID="DragPanelBID" runat="server" TargetControlID="Panel6"
                DragHandleID="Panel7" />
            <script type="text/javascript" language="javascript">
              var minX=0;
              var maxX=500;
              var minY=0;
              var maxY=500;
              var x,y;
              var flag = false;
             
              function pageLoad(){
                  $find('DragPanelBID').add_move(onMove);
                  UpdateHelpWindowState();
              }
             
              function onMove(){
                 flag = false;
                 var el = $find('DragPanelBID').get_element();
                 var newLocation = $common.getLocation(el);
                 //get x value
                 if(newLocation.x>=maxX){flag=true; x=maxX;}
                 else if(newLocation.x < minX){flag=true; x=minX;}
                 else x = newLocation.x;
                 //get y value
                 if(newLocation.y>=maxY){flag=true; y=maxY;}
                 else if(newLocation.y < minY){flag=true; y=minY;}
                 else y = newLocation.y;
                 //reset to the new position
                 if(flag){
                     var finalLocation = new Sys.UI.Point(x,y);
                     $find('DragPanelBID').set_location(finalLocation);
                 }         
              }
             
              function UpdateHelpWindowState()
              {
                //check if the drag panel position is stored...
                var positionCookie = getCookie('helpWindowPos');
                if (positionCookie != null)
                {
                  var windowPos = positionCookie.split(',');
                  var moveToLocation = new Sys.UI.Point(new Number(windowPos[0]), new Number(windowPos[1]));
                  var dpeHelpWindow = $find('DragPanelBID');
                  if (dpeHelpWindow != null)
                  {
                    dpeHelpWindow.set_location(moveToLocation);
                  }
                }

                //track drag panel movements
                var dpeHelpWindow = $find('DragPanelBID');
                if (dpeHelpWindow != null)
                {
                  dpeHelpWindow.add_move(HelpWindow_Move);
                }
              }

              function HelpWindow_Move()
              {
                 var el = $get('Panel6');
                 var newLocation = $common.getLocation(el);
                 setCookie('helpWindowPos', newLocation.x + ',' + newLocation.y);
              }           
             
              function getCookie(name)
              {
                  var start = document.cookie.indexOf(name + "=");
                  var len = start + name.length + 1;
                  if ((!start) && (name != document.cookie.substring(0, name.length)))
                  {
                   return null;
                  }
                  if (start == -1) return null;
                  var end = document.cookie.indexOf(';', len);
                  if (end == -1) end = document.cookie.length;
                  return unescape(document.cookie.substring(len, end));
              }

              function setCookie(name, value, expires, path, domain, secure)
              {
                  var today = new Date();
                  today.setTime(today.getTime());
                  if (expires)
                  {
                   expires = expires * 1000 * 60 * 60 * 24;
                  }
                  var expires_date = new Date(today.getTime() + (expires));
                  document.cookie = name+'='+escape(value) +
                   ((expires) ? ';expires='+expires_date.toGMTString() : '') +
                   ((path) ? ';path=' + path : '') +
                   ((domain) ? ';domain=' + domain : '') +
                   ((secure) ? ';secure' : '');
              }
             
            </script>   
        </form>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2008 8:06 PM

All replies

  • User583989486 posted

    Hi Robert W,

    Does your DragablePanel work correctly before postback?  Based on my experience, locate the DragPanelExtender inside the MasterPage won't cause the problem although it is not recommended in your situation. We suggest that you should first wholly copy my source code to your project and have a test.  If your problem remains there, please post a simple repro here. 

    Best regards,

    Jonathan

    Tuesday, February 5, 2008 11:13 AM
  • User-1334042570 posted

    Hi Jonathan,

    To use an old expression, "let's make sure we're talking apples and apples".  Please download this slightly modified version of your web page here.  There are only 2 differences with it:

    1. I had to change the "ajaxToolkit" prefix to "cc1" to get it to work with my newer version of the Ajax Control Toolkit (to stick with the latest standard).
    2. I've added a LinkButton that simply forces a PostBack to occur.

    So, load the page in your browser, move the draggable panel to another location, and then click on the Link Button.  You'll notice that the draggable panel moves back to its original location.  What I want is a draggable panel that remains in the same location in between AJAX postbacks.

    Interested in your thoughts,

    Robert 

    Tuesday, February 5, 2008 4:10 PM
  • User2050624116 posted

    You need to store the position somewhere where you can read it after returning from the postback, such as in a cookie.

     

    Example:

    function pageLoad(){
      UpdateHelpWindowState();
    }

    function UpdateHelpWindowState()
    {
      //check if the drag panel position is stored...
      var positionCookie = getCookie('helpWindowPos');
      if (positionCookie != null)
      {
        var windowPos = positionCookie.split(',');
        var moveToLocation = new Sys.UI.Point(new Number(windowPos[0]), new Number(windowPos[1]));
        var dpeHelpWindow = $find('dpeHelpWindow');
        if (dpeHelpWindow != null)
        {
          dpeHelpWindow.set_location(moveToLocation);
        }
      }

      //track drag panel movements
      var dpeHelpWindow = $find('dpeHelpWindow');
      if (dpeHelpWindow != null)
      {
        dpeHelpWindow.add_move(HelpWindow_Move);
      }
    }

    function HelpWindow_Move()
    {
       var el = $get('pnlHelpWindow');
       var newLocation = $common.getLocation(el);
       setCookie('helpWindowPos', newLocation.x + ',' + newLocation.y);
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2008 2:19 AM
  • User583989486 posted

    Hi Rmdw,

    You should first store its position to a cookie(just as Kristofer said on his reply) or to HiddenFields before postback. When pageLoad, move it in the right position.  For example,

    <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="storePosition();">Force Postback</asp:LinkButton>

    <script type="text/javascript" language="javascript">
               function pageLoad(){
                   if($get("xPosition").value>0 && $get("yPosition").value>0){
                        var finalLocation = new Sys.UI.Point($get("xPosition").value,$get("yPosition").value);
                        $find('DragPanelBID').set_location(finalLocation);
                    }
               }         
               function storePosition(){
                    var el = $find('DragPanelBID').get_element();
                    var newLocation = $common.getLocation(el);
                    $get("xPosition").value = newLocation.x;
                    $get("yPosition").value = newLocation.y;
                }
            </script>

    Best regards,

    Jonathan

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2008 3:43 AM
  • User-1334042570 posted

    Gents,

    I don't claim to be a JavaScript expert so when I get partial code fragments it's often hard for me to resolve the errors, when they occur.  I opted for KristoferA's approach because wiring up every single control on my real web page is impractical.  I'll post the entire code below, so you can copy & paste, but please know that that I'm getting an "Object expected" error on Line 113: var positionCookie = getCookie('helpWindowPos');         What am I doing incorrectly?

    Robert 

     

     

    <%@ Page Language="C#" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
           
            <div style="height:100px">
              <asp:LinkButton ID="LinkButton1" runat="server">Force Postback</asp:LinkButton>
            </div>
           
            <div style="height: 300px; width: 250px; float: left; padding: 5px;">
                <asp:Panel ID="Panel6" runat="server" Width="250px" Style="z-index: 20;">
                     <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px" BorderStyle="Solid"
                        BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">
                            Drag Me</div>
                    </asp:Panel>
                    <asp:Panel ID="Panel8" runat="server" Width="100%" Height="250px" Style="overflow: scroll;"
                        BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" BorderColor="black"
                        BorderStyle="Solid">
                        <div>
                            <p>
                                This sample uses javascript to reset its showing position when it is out of the limit area.</p>
                            <hr />
                        </div>
                    </asp:Panel>
                </asp:Panel>
            </div>
            <cc1:DragPanelExtender ID="DragPanelExtender1" BehaviorID="DragPanelBID" runat="server" TargetControlID="Panel6"
                DragHandleID="Panel7" />
            <script type="text/javascript" language="javascript">
              var minX=0;
              var maxX=500;
              var minY=0;
              var maxY=500;
              var x,y;
              var flag = false;
             
              function pageLoad(){
                  $find('DragPanelBID').add_move(onMove);
                  UpdateHelpWindowState();
              }
             
              function onMove(){
                 flag = false;
                 var el = $find('DragPanelBID').get_element();
                 var newLocation = $common.getLocation(el);
                 //get x value
                 if(newLocation.x>=maxX){flag=true; x=maxX;}
                 else if(newLocation.x < minX){flag=true; x=minX;}
                 else x = newLocation.x;
                 //get y value
                 if(newLocation.y>=maxY){flag=true; y=maxY;}
                 else if(newLocation.y < minY){flag=true; y=minY;}
                 else y = newLocation.y;
                 //reset to the new position
                 if(flag){
                     var finalLocation = new Sys.UI.Point(x,y);
                     $find('DragPanelBID').set_location(finalLocation);
                 }         
              }
             
              function UpdateHelpWindowState()
              {
                //check if the drag panel position is stored...
                var positionCookie = getCookie('helpWindowPos');
                if (positionCookie != null)
                {
                  var windowPos = positionCookie.split(',');
                  var moveToLocation = new Sys.UI.Point(new Number(windowPos[0]), new Number(windowPos[1]));
                  var dpeHelpWindow = $find('dpeHelpWindow');
                  if (dpeHelpWindow != null)
                  {
                    dpeHelpWindow.set_location(moveToLocation);
                  }
                }

                //track drag panel movements
                var dpeHelpWindow = $find('dpeHelpWindow');
                if (dpeHelpWindow != null)
                {
                  dpeHelpWindow.add_move(HelpWindow_Move);
                }
              }

              function HelpWindow_Move()
              {
                 var el = $get('pnlHelpWindow');
                 var newLocation = $common.getLocation(el);
                 setCookie('helpWindowPos', newLocation.x + ',' + newLocation.y);
              }           
            </script>   
        </form>
    </body>
    </html>
     

    Wednesday, February 6, 2008 6:28 AM
  • User2050624116 posted

    You need to update "dpeHelpWindow" and "pnlHelpWindow" in the script so it matches your object names, and you also need the definitions for the getCookie and setCookie functions.

     

    I.e.:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="testpage.aspx.cs" Inherits="testpage" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
           
            <div style="height:100px">
              <asp:LinkButton ID="LinkButton1" runat="server">Force Postback</asp:LinkButton>
            </div>
           
            <div style="height: 300px; width: 250px; float: left; padding: 5px;">
                <asp:Panel ID="Panel6" runat="server" Width="250px" Style="z-index: 20;">
                     <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px" BorderStyle="Solid"
                        BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">
                            Drag Me</div>
                    </asp:Panel>
                    <asp:Panel ID="Panel8" runat="server" Width="100%" Height="250px" Style="overflow: scroll;"
                        BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" BorderColor="black"
                        BorderStyle="Solid">
                        <div>
                            <p>
                                This sample uses javascript to reset its showing position when it is out of the limit area.</p>
                            <hr />
                        </div>
                    </asp:Panel>
                </asp:Panel>
            </div>
            <cc1:DragPanelExtender ID="DragPanelExtender1" BehaviorID="DragPanelBID" runat="server" TargetControlID="Panel6"
                DragHandleID="Panel7" />
            <script type="text/javascript" language="javascript">
              var minX=0;
              var maxX=500;
              var minY=0;
              var maxY=500;
              var x,y;
              var flag = false;
             
              function pageLoad(){
                  $find('DragPanelBID').add_move(onMove);
                  UpdateHelpWindowState();
              }
             
              function onMove(){
                 flag = false;
                 var el = $find('DragPanelBID').get_element();
                 var newLocation = $common.getLocation(el);
                 //get x value
                 if(newLocation.x>=maxX){flag=true; x=maxX;}
                 else if(newLocation.x < minX){flag=true; x=minX;}
                 else x = newLocation.x;
                 //get y value
                 if(newLocation.y>=maxY){flag=true; y=maxY;}
                 else if(newLocation.y < minY){flag=true; y=minY;}
                 else y = newLocation.y;
                 //reset to the new position
                 if(flag){
                     var finalLocation = new Sys.UI.Point(x,y);
                     $find('DragPanelBID').set_location(finalLocation);
                 }         
              }
             
              function UpdateHelpWindowState()
              {
                //check if the drag panel position is stored...
                var positionCookie = getCookie('helpWindowPos');
                if (positionCookie != null)
                {
                  var windowPos = positionCookie.split(',');
                  var moveToLocation = new Sys.UI.Point(new Number(windowPos[0]), new Number(windowPos[1]));
                  var dpeHelpWindow = $find('DragPanelBID');
                  if (dpeHelpWindow != null)
                  {
                    dpeHelpWindow.set_location(moveToLocation);
                  }
                }

                //track drag panel movements
                var dpeHelpWindow = $find('DragPanelBID');
                if (dpeHelpWindow != null)
                {
                  dpeHelpWindow.add_move(HelpWindow_Move);
                }
              }

              function HelpWindow_Move()
              {
                 var el = $get('Panel6');
                 var newLocation = $common.getLocation(el);
                 setCookie('helpWindowPos', newLocation.x + ',' + newLocation.y);
              }           
             
              function getCookie(name)
              {
                  var start = document.cookie.indexOf(name + "=");
                  var len = start + name.length + 1;
                  if ((!start) && (name != document.cookie.substring(0, name.length)))
                  {
                   return null;
                  }
                  if (start == -1) return null;
                  var end = document.cookie.indexOf(';', len);
                  if (end == -1) end = document.cookie.length;
                  return unescape(document.cookie.substring(len, end));
              }

              function setCookie(name, value, expires, path, domain, secure)
              {
                  var today = new Date();
                  today.setTime(today.getTime());
                  if (expires)
                  {
                   expires = expires * 1000 * 60 * 60 * 24;
                  }
                  var expires_date = new Date(today.getTime() + (expires));
                  document.cookie = name+'='+escape(value) +
                   ((expires) ? ';expires='+expires_date.toGMTString() : '') +
                   ((path) ? ';path=' + path : '') +
                   ((domain) ? ';domain=' + domain : '') +
                   ((secure) ? ';secure' : '');
              }
             
            </script>   
        </form>
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 6, 2008 8:06 PM
  • User-1334042570 posted

    Thank you SO MUCH for sticking with me and for posting the full set of code.  It works GREAT!!!!

    I wish I knew JavaScript as well as I knew C# or VB.  But I find it a very frustrating language, with little formal structure.  When things are working fine then it's no problem to do a little tweaking but if wholesale changes are needed then I'm lost.

    I think that your code will help a lot of other people too!!

    Robert

     

    Wednesday, February 6, 2008 10:39 PM
  • User-1334042570 posted

    I'm hoping I can ask a follow-up question.  Your code works great in a single standalone page but when I tried to use it in a content page that referenced a Master Page, it fails.  I understand why but don't know enough Javascript to fix it.  So I Googled these terms: javascript "master page" asp.net

    But I couldn't find an article that clued me in on how to to fix it.  The problem, as you can imagine, is that I'm getting 'null' with the first line of code:       $find('DragPanelBID').add_move(onMove);

    Using the knowledge that I do have, I tried putting the following line of C# code into Page_Load:   Panel dragPanel = (Panel)FindControl("DragPanelBID"); 

    But it returned null.  If it had returned something then I was going to store that in a hidden variable and then use JavaScript to grab the full name of the drag panel.

    Anyhow, you can see that I'm a bit stumped.  Any chance you could revise your code to work in a Master Page?

    Robert
     

    Thursday, February 7, 2008 1:21 AM
  • User2050624116 posted

    That is probably because whenever naming containers are involved, the client side control names no longer match the server-side names.

     

    By replacing:

    $find('DragPanelBID');
    with
    $find('<%=DragPanelExtender1.BehaviorID%>');

    ...and...

    $get('Panel6');
    with
    $get('<%=Panel6.ClientID%>');

    ...it should also work when wrapped in naming containers.

    Thursday, February 7, 2008 1:46 AM
  • User-1334042570 posted

    Yoo Hoo, Works Great!!!  Thank you!!!

    I'm going to post the full code below to make it easier for someone in the future to work from your superb code!  While this example isn't one with a Master Page I can confirm that it works fine in that capacity too!

    Robert

    P.S. Final note: In my real page, I used CSS and the Hover attribute to do something neat.  When the user hovers over the draggable "titlebar" of the window ("Panel7" in this example) then the background color of the titlebar changes, as does the text color.  The text in the titlebar, which was always present but set to the same color as the background, reads: "Click & Drag To Another Position".  This might seem obvious to the developer, but I think is an excellent visual cue for all users.

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragPanelTest2.aspx.cs" Inherits="Editors_DragPanelTest2" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

    <!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>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
          
            <div style="height:100px">
              <asp:LinkButton ID="LinkButton1" runat="server">Force Postback</asp:LinkButton>
            </div>
          
            <div style="height: 300px; width: 250px; float: left; padding: 5px;">
                <asp:Panel ID="Panel6" runat="server" Width="250px" Style="z-index: 20;">
                     <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px" BorderStyle="Solid"
                        BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">
                            Drag Me</div>
                    </asp:Panel>
                    <asp:Panel ID="Panel8" runat="server" Width="100%" Height="250px" Style="overflow: scroll;"
                        BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" BorderColor="black"
                        BorderStyle="Solid">
                        <div>
                            <p>
                                This sample uses javascript to reset its showing position when it is out of the limit area.</p>
                            <hr />
                        </div>
                    </asp:Panel>
                </asp:Panel>
            </div>
            <cc1:DragPanelExtender ID="DragPanelExtender1" BehaviorID="DragPanelBID" runat="server" TargetControlID="Panel6"
                DragHandleID="Panel7" />
               
          <script type="text/javascript">
            var minX = 0;
            var maxX = 500;
            var minY = 0;
            var maxY = 500;
            var x,y;
            var flag = false;
          
            function pageLoad()
            {
              $find('<%=DragPanelExtender1.BehaviorID%>').add_move(onMove);
              UpdateHelpWindowState();
            }
          
            function onMove()
            {
              flag = false;
              var el = $find('<%=DragPanelExtender1.BehaviorID%>').get_element();
              var newLocation = $common.getLocation(el);

              //get x value
              if (newLocation.x>=maxX)
                {flag=true; x=maxX;}
              else if (newLocation.x < minX)
                {flag=true; x=minX;}
              else x = newLocation.x;
            
              //get y value
              if (newLocation.y>=maxY)
                {flag=true; y=maxY;}
              else if(newLocation.y < minY)
                {flag=true; y=minY;}
              else y = newLocation.y;
            
              //reset to the new position
              if(flag)
              {
                var finalLocation = new Sys.UI.Point(x,y);
                $find('<%=DragPanelExtender1.BehaviorID%>').set_location(finalLocation);
              }        
            }
          
            function UpdateHelpWindowState()
            {
              //check if the drag panel position is stored
              var positionCookie = getCookie('helpWindowPos');
              if (positionCookie != null)
              {
                var windowPos = positionCookie.split(',');
                var moveToLocation = new Sys.UI.Point(new Number(windowPos[0]), new Number(windowPos[1]));
                var dpeHelpWindow = $find('<%=DragPanelExtender1.BehaviorID%>');
                if (dpeHelpWindow != null)
                {
                  dpeHelpWindow.set_location(moveToLocation);
                }
              }

              //track drag panel movements
              var dpeHelpWindow = $find('<%=DragPanelExtender1.BehaviorID%>');
              if (dpeHelpWindow != null)
              {
                dpeHelpWindow.add_move(HelpWindow_Move);
              }
            }

            function HelpWindow_Move()
            {
               var el = $get('<%=Panel6.ClientID%>');
               var newLocation = $common.getLocation(el);
               setCookie('helpWindowPos', newLocation.x + ',' + newLocation.y);
            }          
          
            function getCookie(name)
            {
              var start = document.cookie.indexOf(name + "=");
              var len = start + name.length + 1;
             
              if ((!start) && (name != document.cookie.substring(0, name.length)))
              {
                return null;
              }
             
              if (start == -1)
                return null;
             
              var end = document.cookie.indexOf(';', len);
             
              if (end == -1)
                end = document.cookie.length;
             
              return unescape(document.cookie.substring(len, end));
            }

            function setCookie(name, value, expires, path, domain, secure)
            {
              var today = new Date();

              today.setTime(today.getTime());

              if (expires)
              {
                expires = expires * 1000 * 60 * 60 * 24;
              }
             
              var expires_date = new Date(today.getTime() + (expires));
             
              document.cookie = name + '=' + escape(value) +
               ((expires) ? ';expires=' + expires_date.toGMTString() : '') +
               ((path) ? ';path=' + path : '') +
               ((domain) ? ';domain=' + domain : '') +
               ((secure) ? ';secure' : '');
            }
          </script> 
        </form>
    </body>
    </html>

    Thursday, February 7, 2008 4:57 PM
  • User673003969 posted

    Hello ,

    I also use dragable div using javascript but i convert it aspx(c#). In aspx page i also add button to create div dynamically then the div are set their previous position.please give one solution without using ajax. Thanks  

    <html><head>
    <title>Javascript test page - Universal mouse control</title>
    <script type="text/javascript" src="scripts/wz_jsgraphics.js"></script>
    <style type="text/css">
    body        { ; 
                  font-family: serif;
                  padding: 0 15px 50px 15px;
                  margin: 0 0 0 0;
                }
    table       { ;
                  background-color: #eeeeff;
                  border: 5px #000066 double;
                  margin: 15px 0 15px 15px;
                  float: right;
                }
    //#movable_obj1_id { ; left:90px;  top:80px  }
    //#movable_obj2_id { ; left:140px; top:145px }
    //#movable_obj3_id { ; left:20px;  top:180px  }
    
    .infobox    { width: 200px; 
                  border: 1px #333333 solid; 
                  cursor: default;
                  text-align: left;
                  cursor: pointer;
                  background-color: #77ff77;  
                }
    
    .infobox div { background-color:#000088;
                   text-indent: 1em;
                   color:#ffff00; 
                   width:100%;
                 }
    </style>
    
    </head>
    <body onload="init();">
    <script type="text/javascript" defer="defer">
    var mousex = 0;
    var mousey = 0;
    var grabx = 0;
    var graby = 0;
    var orix = 0;
    var oriy = 0;
    var elex = 0;
    var eley = 0;
    var algor = 0;
    
    var dragobj = null;
    
    function falsefunc() { return false; } // used to block cascading events
    
    function init()
    {
      document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
      update();
    }
    
    function getMouseXY(e) // works on IE6,FF,Moz,Opera7
    { 
      if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
    
      if (e)
      { 
        if (e.pageX || e.pageY)
        { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
          mousex = e.pageX;
          mousey = e.pageY;
          algor = '[e.pageX]';
          if (e.clientX || e.clientY) algor += ' [e.clientX] '
        }
        else if (e.clientX || e.clientY)
        { // works on IE6,FF,Moz,Opera7
          mousex = e.clientX + document.body.scrollLeft;
          mousey = e.clientY + document.body.scrollTop;
          algor = '[e.clientX]';
          if (e.pageX || e.pageY) algor += ' [e.pageX] '
        }  
      }
    }
    
    function update(e)
    {
      getMouseXY(e); // NS is passing (event), while IE is passing (null)
    
      document.getElementById('span_browser').innerHTML = navigator.appName;
      document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
      document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
      document.getElementById('span_mousex').innerHTML = mousex;
      document.getElementById('span_mousey').innerHTML = mousey;
      document.getElementById('span_grabx').innerHTML = grabx;
      document.getElementById('span_graby').innerHTML = graby;
      document.getElementById('span_orix').innerHTML = orix;
      document.getElementById('span_oriy').innerHTML = oriy;
      document.getElementById('span_elex').innerHTML = elex;
      document.getElementById('span_eley').innerHTML = eley;
      document.getElementById('span_algor').innerHTML = algor;
      document.getElementById('span_dragobj').innerHTML = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
    }
    
    function grab(context)
    {
      document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
      dragobj = context;
      dragobj.style.zIndex = 10; // move it to the top
      document.onmousemove = drag;
      document.onmouseup = drop;
      grabx = mousex;
      graby = mousey;
      elex = orix = dragobj.offsetLeft;
      eley = oriy = dragobj.offsetTop;
      update();
    }
    
    function drag(e) // parameter passing is important for NS family 
    {
      if (dragobj)
      {
        elex = orix + (mousex-grabx);
        eley = oriy + (mousey-graby);
        dragobj.style.position = "absolute";
        dragobj.style.left = (elex).toString(10) + 'px';
        dragobj.style.top  = (eley).toString(10) + 'px';
      }
      update(e);
      return false; // in IE this prevents cascading of events, thus text selection is disabled
    }
    
    function drop()
    {
      if (dragobj)
      {
        dragobj.style.zIndex = 0;
        dragobj = null;
      }
      update();
      document.onmousemove = update;
      document.onmouseup = null;
      document.onmousedown = null;   // re-enables text selection on NS
    
    }
    
    
    
    </script>
    
     
    
    <h1>Javascript example - drag and drop</h1>
    
    <table>
    	<tr>
    		<td >parameter</td><td> value </td>
    	</tr>
    	<tr>
    		<td >navigator.appName =</td><td  ><span id="span_browser">Netscape</span></td>
    	</tr>
    	<tr>
    		<td >window.event =</td><td  ><span id="span_winevent">(na)</span></td>
    	</tr>
    	<tr>
    		<td >auto event =</td><td  ><span id="span_autevent">mousemove</span></td>
    	</tr>
    	<tr>
    		<td >algorithm =</td><td  ><span id="span_algor">[e.pageX] [e.clientX] </span></td>
    	</tr>
    	<tr>
    		<td >dragobj =</td><td  ><span id="span_dragobj">(null)</span></td>
    	</tr>
    	<tr>
    		<td >mousex,y =</td><td  ><span id="span_mousex">506</span>, <span id="span_mousey">244</span></td>
    	</tr>
    	<tr>
    		<td >grabx,y =</td><td  ><span id="span_grabx">220</span>, <span id="span_graby">214</span></td>
    	</tr>
    	<tr>
    		<td >orix,y =</td><td  ><span id="span_orix">38</span>, <span id="span_oriy">207</span></td>
    	</tr>
    	<tr>
    		<td >elex,y =</td><td  ><span id="span_elex">60</span>, <span id="span_eley">204</span></td>
    	</tr>
    </table>
    <br>
    
    
    <br>
    <div style="; left: 43px; top: 65px; z-index: 0;" id="Test_1" class="infobox" onmousedown="grab(this)">
      <div> Test-1</div>
      Test-1
    </div>
    
    <div style="; left: 329px; top: 119px; z-index: 0;" id="Test_2" class="infobox" onmousedown="grab(this)">
      <div> Test-2</div>
     Test-2
    </div>
    
    <div style="; left: 60px; top: 204px; z-index: 0;" id="Test_3" class="infobox" onmousedown="grab(this)">
      <div> Test-3 </div>
      Test-3
    </div>
    
    <div style="; left: 60px; top: 119px; z-index: 0;" id="Test_4" class="infobox" onmousedown="grab(this)">
      <div> Test-4 </div>
      Test-4
    </div>
    </body></html>
     
    Wednesday, July 9, 2008 3:15 AM