locked
Drag panel position()? RRS feed

  • Question

  • User-19698620 posted

    I'm sorry if this question has been asked before but the search didn't help.

     I'm trying to use asp.net ajax to build an organizer of a sort.

    I need a dragable panel that remembers it's position after postbacks, but more importantly I need to know where it is so I can place it in different C# containers, ie. Monday, Tuesday, Wednesday...

    How do I get a panel's position so I can do calculations.  if anyone could respond with either their aspx page or their c# page that would be great.
     

    Monday, October 8, 2007 2:22 PM

Answers

  • User583989486 posted

    Hi Borg286,

    How do I get a panel's position so I can do calculations

                    var el = $find('DragPanel's BehaviorID').get_element();
                    var dragLocation = $common.getLocation(el);

                    x = dragLocation.x;  y = dragLocation.y;

     

    How to set its position

                        var finalLocation = new Sys.UI.Point(x,y);
                       $find('DragPanel's BehaviorID').set_location(finalLocation);

     I hope this help.

    Best regards,

    Jonathan

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 12, 2007 3:24 AM

All replies

  • User-19698620 posted

     Anyone?

    Tuesday, October 9, 2007 11:01 PM
  • User583989486 posted

    Hi Borg286,

    How do I get a panel's position so I can do calculations

                    var el = $find('DragPanel's BehaviorID').get_element();
                    var dragLocation = $common.getLocation(el);

                    x = dragLocation.x;  y = dragLocation.y;

     

    How to set its position

                        var finalLocation = new Sys.UI.Point(x,y);
                       $find('DragPanel's BehaviorID').set_location(finalLocation);

     I hope this help.

    Best regards,

    Jonathan

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 12, 2007 3:24 AM
  • User740808334 posted

    Thanks for the post, Jonathan.  

    The 'get' part of this works like a champ!!

    However, I'm having issues with the 'set' portion.  If I'm interpreting the error correctly, it seems that the issue is with the 'set_location' part of the code.  The error on my page says something to the effect of "object does not support this property or method".   Any idea what's causing this?   I'll post the code I have:

     

     

           function adjustToColumn(e){
           //get location
                var widg= getWholeWidgetOnDrop(e);
                var location= $common.getLocation(widg);
                x= location.x;
                y= location.y;
                alert(x + "," + y);
           //set location
                var finalLocation= new Sys.UI.Point(x,y);
                widg.set_location(finalLocation);
           }
     
    The 'getWholeWidget' command gets the actual element and passes it back. 
     I realize that if this code did work, it would be setting it back to the same position, but I'm mostly trying to get a sort of proof of concept for the time being.  

      Any help would be vastly appreciated!!!  Thanks so much!

    --Dustin 

    Tuesday, October 30, 2007 9:18 AM
  • User583989486 posted

    Hi Dustin,

    Here is the sample which you can reference to.  

    <%@ Page Language="C#" %>
    
    <!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: 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>
            
            <ajaxToolkit: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);
                }
                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);
                   }          
                }
            </script>    
        </form>
    </body>
    </html>

    I hope this help.

    Best regards,

    Jonathan 

    Tuesday, October 30, 2007 9:41 AM
  • User740808334 posted

    Once again, your help is invaluable, Jonathan.  I ran your code, and it works just as expected, which is great.  Unfortunately,  I still can't get it to work in my code...  So, I guess my question would be, is the 'set_location' function something that's intrinsic to the BehaviorID?  You see, the way I'm adding my floating boxes, I'll end up with several that have the same ID, which is why I'm obtaining the object from the event thrown, not by the ID.  If the set_location function is referenced to the BehaviorID, is there any way I can obtain the DragPanelExtender associated with a particular object, if all I have is the object itself? Also, since we're on the matter, is there any kind of API out there for some of the AJAX controls?  I can't seem to find anything for the life of me!  Thanks once again, you are greatly appreciated!

    --Dustin 

    Tuesday, October 30, 2007 10:35 AM
  • User583989486 posted

    Hi Dustin,

    So, I guess my question would be, is the 'set_location' function something that's intrinsic to the BehaviorID? 

    set_location is a function which is contained inside FloatingBehavior.js.

    If the set_location function is referenced to the BehaviorID, is there any way I can obtain the DragPanelExtender associated with a particular object, if all I have is the object itself?

    Yes.  $find("DragPanelExtender's BehaviorID").set_location();  Also you can use $common.setLocation(dom element,location) ;  For more details, please dip into the Common.js.Thanks.

    Best regards,

    Jonathan

     

     

    Tuesday, October 30, 2007 10:06 PM
  • User740808334 posted

    Jonathan, you are a God among men! Really!   You've been SO much help, and I vastly appreciate it!  Now I can complete this darn project!  Somebody give this man a cookie!

    BTW, for some reason $common.setLocation(); didn't work for me... but I just extended it to Sys.UI.DomElement.setLocation(); and it worked just fine.  Again, thanks so much! 

    Wednesday, October 31, 2007 8:26 AM
  • User-1702444933 posted

    Hello, I think i have the same problem but more complicated. I have created an AJAX enabled Web Page using c#. There i have one updatePannel. In this updatepannel i add elements from XML File. Each element consist of one link, text and image. These elements are finnally in asp panels. On each pannel ,i.e. each element i have dragpannels binded. All these steps happens on run time, on PageLoad. Now i want to save the position of the elements, what i have. Does anybody can help me?

    this is my source

    XmlDocument xmlF = new XmlDocument();int i = 0;

    xmlF.Load(Server.MapPath(xmlName));

    for (i = 0; i < xmlF.DocumentElement.ChildNodes.Count; i++)

    {

    Trends.
    Trend trn = new Trends.Trend();

    trn.link = xmlF.DocumentElement.ChildNodes[i].Attributes[1].InnerText.ToString();

    trn.text = xmlF.DocumentElement.ChildNodes[i].Attributes[0].InnerText.ToString();

    trn.XPositionInt = xmlF.DocumentElement.ChildNodes[i].Attributes[2].InnerText.ToString();

    trn.YPositionInt = xmlF.DocumentElement.ChildNodes[i].Attributes[3].InnerText.ToString();

    trn.IDint = xmlF.DocumentElement.ChildNodes[i].Attributes[4].InnerText.ToString();

    trn.Visible =
    true;

    Panel1.Controls.Add(trn);

    if (Login(System.Environment.UserName.ToString()))

    {

    AjaxControlToolkit.
    DragPanelExtender drPnl = new AjaxControlToolkit.DragPanelExtender();drPnl.ID = "DrgPnl"+ trn.IDint;

    drPnl.TargetControlID = trn.IDint;

    Panel1.Controls.Add(drPnl);

    drPnl.EnableClientState =
    true;drPnl.BehaviorID = "BhvrID" + trn.IDint;

     

     

     

     

    }

    So what i tried is:

     

     

    protected void SvBtn_Click(object sender, EventArgs e)

    {

    XmlDocument xmlF = new XmlDocument();

    int i = 0;

    xmlF.Load(Server.MapPath(xmlFileName));

    foreach (Trends.Trend trn in Panel1.Controls)

    {

    for (i = 0; i < xmlF.DocumentElement.ChildNodes.Count; i++)

    {

    if (trn.IDint == xmlF.DocumentElement.ChildNodes[i].Attributes[4].InnerText.ToString())

    {

    xmlF.DocumentElement.ChildNodes[i].Attributes[2].InnerText = trn.XPositionInt;

    xmlF.DocumentElement.ChildNodes[i].Attributes[3].InnerText = trn.YPositionInt;

    }

    }

    }

    xmlF.Save(Server.MapPath(xmlFileName));

    }

    But this doesn't work.

    I want to save the position of my elements in XML File, after replacing then by asp drag panels.

    Please help me!

    Tuesday, July 22, 2008 7:34 AM
  • User1407828493 posted

    try this.I have done this for my application.

     javascript

    function pageLoad() {

                var i = 0;
                for (i = 0; i <= 2; i++) {
                    // call the savePanelPosition when the panel is moved
                    $find('0').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('<%=DPE1.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
                    }

    }

     

    function savePanelPosition() {
                var elem = $find('0').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;

    }

     

     

    <asp:Panel ID="pnlCompanyName" CssClass="pnlcompanyName" runat="server">
                                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                        <ContentTemplate>
                                            <asp:Label ID="lblCompanyName" runat="server" Text="Company Name"></asp:Label>
                                            <br />
                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                            <asp:AsyncPostBackTrigger ControlID="txtCompanyName" EventName="textchanged" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </asp:Panel>
                                <cc1:DragPanelExtender ID="DPE1" runat="server" BehaviorID="0" TargetControlID="pnlCompanyName">
                                </cc1:DragPanelExtender>

     

     <asp:HiddenField ID="HiddenField1" runat="server" Value="0" />

     

    if this help to yo work plz let me know

    Wednesday, December 17, 2008 5:39 AM
  • User355564807 posted

    Hi guys !

     Firstly, I want to thank you for this post, it was very useful for me.

     

    But I have a problem to use the set_location.

     

    In fact, in my app, I save the position of my objects when the user quits. When he comes back to the page, i want to reload the objects as he left them.

    The problem is the following : with the set_location() function, I need the BehaviorID, but in fact it doesn't work for me. I think the problem is that the Behavior is not created yet, so that my function can't find it. I have a JS debugger, and when I execute the code step by step, it works.

    Is there a function to call to be sure that the behavior exists ? I was thinking about testing : while(the behavior doesn't exist); and after do my job, but I'm not sure if this would be correct.

     

    Thanks by advance for your help!

    Bye,

    Damien.. 

    Sunday, January 11, 2009 9:29 AM
  • User1407828493 posted

    I think you are talking about '<%=DPE1.BehaviorID%>. DPE1 is a panel.You should contain your dragging area INSIDE A PANEL.AND use it's id like this('<%=DPE1.BehaviorID%>).After then save it in a hidden field.If you want use it in the application life time you can save it in a session variable to reuse it.Every thing has done in my previous post without to saving the session.

    Hope this help to you.waiting for your reply.If this helped you keep remember to mark this as an answer to use to other people too.

    tnx,

    maduranga001

    Sunday, January 11, 2009 10:48 PM