To know your position when you use DragPanelExtender

Last post 12-07-2007 1:00 AM by Jonathan Shen – MSFT. 1 replies.

Sort Posts:

  • To know your position when you use DragPanelExtender

    11-30-2007, 10:22 AM
    • Member
      669 point Member
    • wesleymichel
    • Member since 04-06-2003, 6:27 AM
    • Paris, France
    • Posts 153

    Hi,

    I would like to know the position of my panel when you use DragPanelExtender.

    And after move my panel on my left column or right column

    Thank you for your idea.

    Have a nice week-end

  • Re: To know your position when you use DragPanelExtender

    12-07-2007, 1:00 AM
    Answer

    Hi Wesleymichel,

    You can use $common.getLocation(DOM Element) to get its position.  Here is the working sample.

    <%@ 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 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" ondrop="getDropPosition()">
                            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">
                function getDropPosition(){
                    var currentPosition = $common.getLocation($get("<%=Panel7.ClientID%>"));
                    alert("x:"+currentPosition.x +"y:"+currentPosition.y);
                }
            </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.
Page 1 of 1 (2 items)