I need to get the location coordinates (left,top) of a DragPanelExtender after the drop action.
I can obtain the coordinates of the control, calling the following jscript function, where 'Panel1' is trhe containing control, 'drag1' is the 'BehaviorID' of the DragPanelExtender control.
$addHandler($get(
"Panel1"),"drop",getcoords);
function getcoords()
{
var rcp = $find('drag1');
var location = rcp.get_location();
$get("coordx").innerHTML = location.x;
$get("coordy").innerHTML = location.y;
}
Unlukly this method works fine the first time you call it, but does not work at all in answer of the next drop events.
In the late case the location.x and location.y value is undefined.
do you know how to hook the PropertyChanged('location') event of the control?
I have tried to insert an handle for almost every function in the source code ( see..\DragPanel\FloatingBehaviour.js) but the only handle that hooks the event after a control displacement is "drop"
Al the other handles works only the first time end next do nothing.
The drop event works fine, but all the get_location() calls after the first one return location.x and location.y is Undefined. So, I think the problem is to understand what is the right function to call to obtain the control location after
a drop (if there is one).
You would hook into that event in this way and expect the event to be raised every time the drag panel is done moving and the location has actually changed.
function ShowDragLocation() {
var dragPanel = $find('dragPanelBehavior');
$addHandler(dragPanel,
'propertyChanged', locationUpdatedHandler()); // the handler would get the name of the property from the event args and if it is 'location' then do the right thing.
return false;
}
Kirti Deshpande
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
your code does not work, because the $find method returns the component object that contains the component requested by ID, while the $addHandler method needs a Sys.UI.DomElement as first argument. So, the IE gets the following error:
Sys.ArgumentException: Value must be a DOM Element.
Replacing: $find('dragPanelBehavior')
with $get('dragPanelID') does not work too.
with $get('dragPanelExtenderContainerID') does not generate error, but (of course) the propertyChanged event is not hooked.
I had not tried the code I recommended but since you suggested that it did not work I went ahead and tested it and it seemed to the right thing for me everytime. I am not special casing for just the location property and I could perhaps get rid of the params
in the second function because of that. But here is the code. This code is not perfect but it should give you a general idea.
<script
type="text/javascript">
function dragSetup() {
var dragPanel = $find('dragPanelBehavior1');
$addHandler(dragPanel,
'propertyChanged', locationUpdatedHandler());
// the handler would get the name of the property from the event args and if it is 'location' then do the right thing.
return false;
}
function locationUpdatedHandler(sender, eventargs) {
var dragPanel = $find('dragPanelBehavior1');
var label = $get('dragPanelLocation');
var loc = dragPanel.get_location()
Actually I went ahead and fixed the code. I now add the handler to the application load event. Also, I was adding the propertyChanged handler incorrectly.
// the handler would get the name of the property from the event args and if it is 'location' then do the right thing.
return false;
}
function
locationUpdatedHandler(sender, eventargs) {
if(eventargs.get_propertyName() ==
'location') {
var dragPanel = $find('dragPanelBehavior1');
var label = $get('dragPanelLocation');
var loc = dragPanel.get_location()
Thanks for the code, this is great! I was able to stick the coordinates in a textbox and then have a button call a postback and pickup the coordinates from the textbox and let me set the coordinates in the style for the panel so that it keeps position on
postback. My only issue now is if a user moves the object again, the coordinates are off...they seem to be relative to its new starting location. Is there any way to make it always get coordinates relative to 0,0 of the page?
Walter Zocca...
Member
6 Points
8 Posts
DragPanelExtender drop event problem
Apr 17, 2007 08:09 AM|LINK
Hallo All
Ajax Control Toolkit 1.0
I need to get the location coordinates (left,top) of a DragPanelExtender after the drop action.
I can obtain the coordinates of the control, calling the following jscript function, where 'Panel1' is trhe containing control, 'drag1' is the 'BehaviorID' of the DragPanelExtender control.
$addHandler($get(
"Panel1"),"drop",getcoords);function getcoords()
{
var rcp = $find('drag1');
var location = rcp.get_location();
$get("coordx").innerHTML = location.x;
$get("coordy").innerHTML = location.y;
}
Unlukly this method works fine the first time you call it, but does not work at all in answer of the next drop events.
In the late case the location.x and location.y value is undefined.
Can anybody help me?
Thanks
Walter
kirtid
Contributor
2610 Points
658 Posts
Microsoft
Re: DragPanelExtender drop event problem
Apr 17, 2007 06:18 PM|LINK
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
Walter Zocca...
Member
6 Points
8 Posts
Re: DragPanelExtender drop event problem
Apr 18, 2007 08:26 AM|LINK
I thank you very much for the suggestion.
do you know how to hook the PropertyChanged('location') event of the control?
I have tried to insert an handle for almost every function in the source code ( see..\DragPanel\FloatingBehaviour.js) but the only handle that hooks the event after a control displacement is "drop"
Al the other handles works only the first time end next do nothing.
The drop event works fine, but all the get_location() calls after the first one return location.x and location.y is Undefined. So, I think the problem is to understand what is the right function to call to obtain the control location after a drop (if there is one).
Walter
kirtid
Contributor
2610 Points
658 Posts
Microsoft
Re: DragPanelExtender drop event problem
Apr 18, 2007 06:29 PM|LINK
You would hook into that event in this way and expect the event to be raised every time the drag panel is done moving and the location has actually changed.
function ShowDragLocation() {
var dragPanel = $find('dragPanelBehavior');$addHandler(dragPanel,
'propertyChanged', locationUpdatedHandler()); // the handler would get the name of the property from the event args and if it is 'location' then do the right thing. return false;}
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
Walter Zocca...
Member
6 Points
8 Posts
Re: DragPanelExtender drop event problem
Apr 19, 2007 09:28 AM|LINK
your code does not work, because the $find method returns the component object that contains the component requested by ID, while the $addHandler method needs a Sys.UI.DomElement as first argument. So, the IE gets the following error:
Sys.ArgumentException: Value must be a DOM Element.
Replacing: $find('dragPanelBehavior')
Is it really so difficult to do this stupid job?
Walter
kirtid
Contributor
2610 Points
658 Posts
Microsoft
Re: DragPanelExtender drop event problem
Apr 19, 2007 06:34 PM|LINK
I had not tried the code I recommended but since you suggested that it did not work I went ahead and tested it and it seemed to the right thing for me everytime. I am not special casing for just the location property and I could perhaps get rid of the params in the second function because of that. But here is the code. This code is not perfect but it should give you a general idea.
<script type="text/javascript">
function dragSetup() { var dragPanel = $find('dragPanelBehavior1');$addHandler(dragPanel,
'propertyChanged', locationUpdatedHandler()); // the handler would get the name of the property from the event args and if it is 'location' then do the right thing. return false;}
function locationUpdatedHandler(sender, eventargs) {
var dragPanel = $find('dragPanelBehavior1'); var label = $get('dragPanelLocation'); var loc = dragPanel.get_location()label.innerHTML = loc;
}
</script>And here is the html:
<div class="demoarea" onclick="dragSetup()"> <div class="demoheading">DragPanel Demonstration</div> <label id="dragPanelLocation"></label> <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 panel will reset its position on a postback or page refresh.</p> <hr /> <p><%= GetContentFillerText() %></p> </div> </asp:Panel> </asp:Panel> </div> <div style="clear: both;"></div>
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel6" DragHandleID="Panel7" BehaviorID="dragPanelBehavior1" /> </div>Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
kirtid
Contributor
2610 Points
658 Posts
Microsoft
Re: DragPanelExtender drop event problem
Apr 20, 2007 04:07 AM|LINK
Actually I went ahead and fixed the code. I now add the handler to the application load event. Also, I was adding the propertyChanged handler incorrectly.
Here is the fixed code:
<script type="text/javascript">Sys.Application.add_load(dragSetup);
function
dragSetup() {var
dragPanel = $find('dragPanelBehavior1');dragPanel.add_propertyChanged(locationUpdatedHandler);
// the handler would get the name of the property from the event args and if it is 'location' then do the right thing. return false;}
function
locationUpdatedHandler(sender, eventargs) { if(eventargs.get_propertyName() == 'location') { var dragPanel = $find('dragPanelBehavior1'); var label = $get('dragPanelLocation'); var loc = dragPanel.get_location()label.innerHTML = loc;
}
}
</script> <asp:ScriptManager runat="Server" ID="ScriptManager1" /> <div class="demoarea"> <div class="demoheading">Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
Walter Zocca...
Member
6 Points
8 Posts
Re: DragPanelExtender drop event problem
Apr 20, 2007 07:40 AM|LINK
I thank you very much.
I think your code will be very useful. I am now out of office till next week. I will try your code as soon as possible.
I will report you about.
Walter
Walter Zocca...
Member
6 Points
8 Posts
Re: DragPanelExtender drop event problem
Apr 20, 2007 03:30 PM|LINK
Your code works fine!! [:)]
I Thank you very much for your useful suggestions.
Walter
Cattrah
Member
401 Points
102 Posts
Re: DragPanelExtender drop event problem
Jun 05, 2007 03:06 PM|LINK
Thanks for the code, this is great! I was able to stick the coordinates in a textbox and then have a button call a postback and pickup the coordinates from the textbox and let me set the coordinates in the style for the panel so that it keeps position on postback. My only issue now is if a user moves the object again, the coordinates are off...they seem to be relative to its new starting location. Is there any way to make it always get coordinates relative to 0,0 of the page?