I've been playing around with DragPanel and it's pretty cool but I haven't seen a way to limit the area that a user is able to drag the panel around. For example if you go to the
DragPanel Sample you'll see that you can drag the panel into the header, the menu section and the footer, pretty much anywhere. In a "real application" you probably want to limit the area where it can be dragged. Is there some built in property or method
to handle this that I've not seen yet or will I have to "re-extend it" (essentially wrapping it)?
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
Hi, I was looking into a similar issue to what the original author was dealing with when I ran across your code. I'm kind of new to the whole javascript scene, so if you could, would it be possible to explain the stuff you have there? (My biggest issues
are with the $ instances, and the functions they're paired with.) Thanks so much!
$find is used to find the AjaxControlToolkit Contols.
$get equals to document.getElementById.
$common is a powerful function.
These are the functions contained inside the MS Ajax Library. For more , please visit here.
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
This looks great...but if I have multiple drag panels on one page (created dynamically), all bound to the same move handler, how can I tell which panel caused the event to fire?
Do you have anymore details on using multiple drag panels? We are doing the same thing but having trouble trying to use the above code. We've tried using multiple event handlers and parameterization, but we get errors. What did you do to solve for multiple
drag panels?
Not sure if it'll relate to your scenario, but ours works this way:
We have custom javascript objects that represent our draggable panels. When we create them, we have to do this:
var panel = new MyDragPanel(var1, var2);
var f = function()
{
var el = panel._fb.get_element();
//do code to make sure the drag is within your bounds
};
panel._fb.add_move(f);
So inside MyDragPanel, the _fb property represents our floating behavior object. It took me a bit to wrap my head around it, but that's functional programming for you, I guess :)
Christopher9...
Member
18 Points
10 Posts
Is there a built in way to limit the DragPanel's drag area?
Sep 03, 2007 02:45 PM|LINK
I've been playing around with DragPanel and it's pretty cool but I haven't seen a way to limit the area that a user is able to drag the panel around. For example if you go to the DragPanel Sample you'll see that you can drag the panel into the header, the menu section and the footer, pretty much anywhere. In a "real application" you probably want to limit the area where it can be dragged. Is there some built in property or method to handle this that I've not seen yet or will I have to "re-extend it" (essentially wrapping it)?
Thanks in advance,
Christopher
DragPanel
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
clasifyd
Member
16 Points
26 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Oct 24, 2007 04:45 PM|LINK
Hi, I was looking into a similar issue to what the original author was dealing with when I ran across your code. I'm kind of new to the whole javascript scene, so if you could, would it be possible to explain the stuff you have there? (My biggest issues are with the $ instances, and the functions they're paired with.) Thanks so much!
--Dustin
Jonathan She...
All-Star
31269 Points
3445 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Oct 25, 2007 02:00 AM|LINK
Hi Dustin,
$find is used to find the AjaxControlToolkit Contols.
$get equals to document.getElementById.
$common is a powerful function.
These are the functions contained inside the MS Ajax Library. For more , please visit here.
Best regards,
Jonathan
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
clasifyd
Member
16 Points
26 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Oct 25, 2007 12:17 PM|LINK
That's great! I appreciate the link!
--Dustin
JPrime
Member
42 Points
15 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Jan 10, 2008 10:19 PM|LINK
Hi Jonathan,
This looks great...but if I have multiple drag panels on one page (created dynamically), all bound to the same move handler, how can I tell which panel caused the event to fire?
Thanks!
Jonas
JPrime
Member
42 Points
15 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Jan 10, 2008 11:39 PM|LINK
I actually figured out how to do this, but it was kind of specific to my own scenario. Thanks anyway :D
nvafiades
Member
2 Points
1 Post
Re: Is there a built in way to limit the DragPanel's drag area?
Feb 06, 2008 05:25 PM|LINK
Do you have anymore details on using multiple drag panels? We are doing the same thing but having trouble trying to use the above code. We've tried using multiple event handlers and parameterization, but we get errors. What did you do to solve for multiple drag panels?
JPrime
Member
42 Points
15 Posts
Re: Is there a built in way to limit the DragPanel's drag area?
Feb 06, 2008 05:34 PM|LINK
Not sure if it'll relate to your scenario, but ours works this way:
We have custom javascript objects that represent our draggable panels. When we create them, we have to do this:
var panel = new MyDragPanel(var1, var2); var f = function() { var el = panel._fb.get_element(); //do code to make sure the drag is within your bounds }; panel._fb.add_move(f);So inside MyDragPanel, the _fb property represents our floating behavior object. It took me a bit to wrap my head around it, but that's functional programming for you, I guess :)