locked
limit dragPanelExtender dragging area RRS feed

  • Question

  • User1463647503 posted

    hi,

    i using dragPanelExtender to drag my controls.

    can i limit my dragging area for the control?

    for example inside this div tag or inside this control panel only?

    Friday, February 28, 2014 12:23 AM

Answers

All replies

  • User1463647503 posted

    anyone knows?

    Saturday, March 1, 2014 12:45 PM
  • User-933407369 posted

    hi,

    As far as I know, there are several solutions for your situation. Here are the two solutions.

    >>Solution one:

            Modify the source code and add the limited area property.(It is not recommended because once your Ajax Control Toolkit be updated ,you should also add the modifications to its source code)

    >>Solution two:

           We attach a Javascript function to the DragPanel's add_move event, the function will be called after the dragging operation and it will make the dragged Panel  shown in a proper position. 

    Here is the sample for solution two. 

    <%@ 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>

    please refer to the link for details:

    Is there a built in way to limit the DragPanel's drag area

    http://forums.asp.net/t/1154072.aspx

    I hope this helps.

    Best regards !!

    Sunday, March 2, 2014 8:45 PM
  • User1463647503 posted

    i think the javascript will be a better solution.

    but when i tried to modified the x y of the javascript. i still unable to extend the drag area.

    where  ever i drag, it went back to reset area.

    Sunday, March 2, 2014 9:46 PM
  • User-933407369 posted

    i would suggest you check out the codes and have a try :

    Drag and Drop with ASP.NET AJAX

    http://msdn.microsoft.com/en-us/magazine/cc135985.aspx

    if it is not helpful, you maybe consider  jQuery draggable

    Experimenting with jQuery Draggables and ASP.NET

    http://www.mikesdotnetting.com/Article/100/Experimenting-with-jQuery-Draggables-and-ASP.NET

    Hope it helps you.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 4, 2014 4:28 AM
  • User1463647503 posted

    hi happy chen

    this 2 links are awesome and easy to understand as well.

    really appreciate your help.

    Tuesday, March 4, 2014 4:57 AM