You want to make your dragged Panel shown in a limited area, don't you? If I have misunderstood, please feel free to let me know.
As far as I know, there are several solutions for your situation. Here are the two.
<div mce_keep="true">Solution one</div>
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)
<div mce_keep="true">Solution two</div>
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>
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
Jonathan She...
All-Star
31269 Points
3445 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Sep 05, 2007 08:55 AM|LINK
Hi Christopher,
You want to make your dragged Panel shown in a limited area, don't you? If I have misunderstood, please feel free to let me know.
As far as I know, there are several solutions for your situation. Here are the two.
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)
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>I hope this help.
Best regards ,
Jonathan
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework