Drag panel position()?

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Discussion and Suggestions » Drag panel position()?

Shortcuts

Previous Next

Rate It (1)

Last post 01-11-2009 10:48 PM by maduranga001. 11 replies.

Sort Posts:

Drag panel position()?

10-08-2007, 2:22 PM

Contact

point Member
borg286
Member since 10-08-2007, 6:16 PM
Posts 2

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.

Filed under: panel position, Drag panel

Re: Drag panel position()?

10-09-2007, 11:01 PM

Contact

point Member
borg286
Member since 10-08-2007, 6:16 PM
Posts 2

Anyone?

Re: Drag panel position()?

10-12-2007, 3:24 AM

Contact

Answer

30,816 point All-Star
Jonathan Shen – MSFT
Member since 06-18-2007, 8:44 AM
Posts 3,401

Hi Borg286,

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;

borg286:
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

Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Drag panel position()?

10-30-2007, 9:18 AM

Contact

16 point Member
clasifyd
Member since 10-22-2007, 3:23 PM
Posts 26

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

Re: Drag panel position()?

10-30-2007, 9:41 AM

Contact

30,816 point All-Star
Jonathan Shen – MSFT
Member since 06-18-2007, 8:44 AM
Posts 3,401

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

Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Drag panel position()?

10-30-2007, 10:35 AM

Contact

16 point Member
clasifyd
Member since 10-22-2007, 3:23 PM
Posts 26

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

Re: Drag panel position()?

10-30-2007, 10:06 PM

Contact

30,816 point All-Star
Jonathan Shen – MSFT
Member since 06-18-2007, 8:44 AM
Posts 3,401

Hi Dustin,

clasifyd:
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.

clasifyd:
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

Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Re: Drag panel position()?

10-31-2007, 8:26 AM

Contact

16 point Member
clasifyd
Member since 10-22-2007, 3:23 PM
Posts 26

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!

Re: Drag panel position()?

07-22-2008, 7:34 AM

Contact

2 point Member
craylx
Member since 07-22-2008, 11:23 AM
Posts 1

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!

Re: Drag panel position()?

12-17-2008, 5:39 AM

Contact

113 point Member
maduranga001
Member since 08-18-2008, 12:32 AM
Posts 176

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

Visit for Microsoft Technical Issues and Solutions
http://prasadmaduranga.blogspot.com/

Re: Drag panel position()?

01-11-2009, 9:29 AM

Contact

2 point Member
damdam
Member since 01-11-2009, 2:16 PM
Posts 1

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..

Re: Drag panel position()?

01-11-2009, 10:48 PM

Contact

113 point Member
maduranga001
Member since 08-18-2008, 12:32 AM
Posts 176

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

Visit for Microsoft Technical Issues and Solutions
http://prasadmaduranga.blogspot.com/