Drag panel position()? : The Official Microsoft ASP.NET Forums

Reply

Drag panel position()?

Oct 08, 2007 06:22 PM|LINK

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.

Reply

Re: Drag panel position()?

Oct 10, 2007 03:01 AM|LINK

Anyone?

Reply

Re: Drag panel position()?

Oct 12, 2007 07:24 AM|LINK

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

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework

Reply

Re: Drag panel position()?

Oct 30, 2007 01:18 PM|LINK

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

Reply

Jonathan She...

All-Star

31269 Points

3445 Posts

Re: Drag panel position()?

Oct 30, 2007 01:41 PM|LINK

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

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework

Reply

clasifyd

Member

16 Points

26 Posts

Re: Drag panel position()?

Oct 30, 2007 02:35 PM|LINK

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

Reply

Jonathan She...

All-Star

31269 Points

3445 Posts

Re: Drag panel position()?

Oct 31, 2007 02:06 AM|LINK

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

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework

Reply

clasifyd

Member

16 Points

26 Posts

Re: Drag panel position()?

Oct 31, 2007 12:26 PM|LINK

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!

Reply

craylx

Member

2 Points

1 Post

Re: Drag panel position()?

Jul 22, 2008 11:34 AM|LINK

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!

Reply

maduranga001

Member

162 Points

230 Posts

Re: Drag panel position()?

Dec 17, 2008 09:39 AM|LINK

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

Drag panel position()? RSS

11 replies

borg286

Drag panel position()?

borg286

Re: Drag panel position()?

Jonathan She...

Re: Drag panel position()?

borg286

borg286

clasifyd

Re: Drag panel position()?

Jonathan She...

Re: Drag panel position()?

clasifyd

Re: Drag panel position()?

Jonathan She...

Re: Drag panel position()?

clasifyd

clasifyd

clasifyd

Re: Drag panel position()?

craylx

Re: Drag panel position()?

maduranga001

Re: Drag panel position()?

Powered by MSDN

Follow Us On:

Microsoft

FRAMEWORKS

TECHNOLOGIES

vNEXT

Drag panel position()? RSS

11 replies

Drag panel position()?

Re: Drag panel position()?

Re: Drag panel position()?

borg286

borg286

Re: Drag panel position()?

Re: Drag panel position()?

Re: Drag panel position()?

Re: Drag panel position()?

clasifyd

clasifyd

Re: Drag panel position()?

Re: Drag panel position()?

Re: Drag panel position()?

Powered by MSDN

Follow Us On: