I'm posting this in the JS forum since that's where most of my code lives.
This came up in another thread and If I elevate it to it's own thread maybe we can kick it around.
I've talked about dragging a lot, and so have a bunch of other people, but the question was asked of me today: "why is it that if you drag quickly, you can end up losing the object" ... and that's a good question because we DO have the mouse captured, so
what gives?
On my OutlookBar on my site: WynApse.com, if you grab a button and start moving slowly it works fine, you let go of the mouse, things snap in place... coolness.
If you drag fast, the same thing happens, although it happens without you letting go of the mouse. But wait... the mouse up message *must* have come through, because the code isn't pooting...so what makes the mouse release early if you go too fast... guess
I need to test that and see if the mouse up message actually hits ... I'll do that later this evening and tack the results onto here.
I've asked Jesse Liberty about this, and we made a deal... I ask here, he asks internally and we meet in the middle :)
So any goodness we come up with here I'll report to him, and vice verse....
"Fast moving mouse" is probably an issue with the mose leave event firing and messing things up. Maybe even the mouse enter event as the canvas moves on and then the mouse enters into it.
Have you tried debugging this and checking the order in which events are fired?
Here's a basic Trace method I use when debugging ad-hoc Javascript. Add some "trace('mouseEnter ' + sender.name);" all through your event handlers to see what order the events are fired.
I did not see any significant differences between the two so why are they acting differently. Also in the
http://www.wynapse.com/Silverlight/DesertCodeCampIIIBasicSilverlight.zip when you drag really fast the positioning of the buttons gets all messed up. I'm looking into this myself, i'll post if I find
anything.
Don't forget to "Mark as Answer" if this post answered your question Life's good
My Site
Ok I found it, it wasn't a mouse capture problem but a little bug. You just have to add "if (sender.mouseCapture())", I added this to the online example and works great now.
function onMouseLeave(sender, args)
{
// Change to deal with moving MouseEnter MouseLeave into the canvas
//sender.findName(sender.Name + "Image").Source = "images/" + sender.findName(sender.Name + "Image").Tag + ".png";
// Addition to effectively assert mouse up when cursor exits button
if(sender.mouseCapture())
{
if (fIsMouseDowna)
{
PutButtonBacka(sender);
LiftMouseHelpera(sender);
}
}
}
Don't forget to "Mark as Answer" if this post answered your question Life's good
My Site
I'll have to play with that a bit, but can't until I get home tonight.
I tried to post this morning, but my system got locked up again with twitter issues on someone else's site this time... last night it was mine :(
I was ready to point my finger at the volume of code being handled in the mouse move message.
I commented out the "PutButtonBack" and "LiftMouseHelper" and it worked fine, it's just that the mouse cursor got very out of sync with the location of the button. I could be near the bottom of the canvas moving up and down and the button would be near the
top doing it's thing.
I'll reserve all judgement until I can test this, particularly with the code on my MasterPage.
Well, I've had a chance to look at this,and I'm not sure that fix is a fix.
I've scrounged through the documentation for SL 1.0, and I can't find mouseCapture() anywhere.
To check that thought, I went to my MouseDown function, and just after the sender.CaptureMouse(), I inserted this code:
if (sender.MouseCapture())
alert("MouseCapture");
and not only did I NOT get that message, but the function apparently aborted at that point, and indeed there is a JS error on that line.
So, I don't believe that function is valid, and may explain why the code 'works better' for you.
First let me explain my thought process from my 1 hour drive home:
The canvas for my OutlookBar is only as wide as the buttons. I did that so the buttons only move in one direction.. up and down. I tested last night and was not getting any rogue mouseenter messages, only the mouseleave. The codeblock in question is there
for only one purpose, and that's to detect if the mouse goes off the button while being dragged, and that can happen 4 ways:
1) off the top of the canvas because the button is at the top, and you kept going, and now are in a weird state
2) same thing off the bottom
3 & 4) off the button to the left or right and in either case you are once again, off the canvas.
By testing if the sender of the mouseleave has the mouse captured you are really testing for these 4 states.
Consider what it means that the mouse is 'Captured' ... that object gets exclusive rights to the mouse events such as mouse move.
So we're tracking the mousemove, yet we find ourselves dealing with a mouseleave handler. That means that the mouse has exited the button that has captured the mouse... and how does that happen?
I believe it happens because I'm doing too much processing inside the mousemove handler... there's like 100 lines of code+comments in the mousemove and I'm pretty sure that's why we can get ahead of it.
Call me out on this if I'm wrong, or point me to where MouseCapture() is explained... I've been wrong lots, and this might me another :)
I don't consider this the end of the discussion, btw... I'm going to continue to play with the code.
Now I'm a lost, you're right that is not a fix. I just took that line out and it didn't change anything it works the same. The mouse is 'captured' but as you mentioned before the mouse pointer gets out of sync with the buttons. I may play around with it
some more once I find the time but right now it's good enough for what I'm using it for. Here is some documentation that I found
http://msdn2.microsoft.com/en-us/library/bb980099.aspx .Hope this helps.
Don't forget to "Mark as Answer" if this post answered your question Life's good
My Site
WynApse
Star
14658 Points
343 Posts
Drag and Drop as in Drop what your dragging too soon
Jan 31, 2008 11:08 PM | LINK
I'm posting this in the JS forum since that's where most of my code lives.
This came up in another thread and If I elevate it to it's own thread maybe we can kick it around.
I've talked about dragging a lot, and so have a bunch of other people, but the question was asked of me today: "why is it that if you drag quickly, you can end up losing the object" ... and that's a good question because we DO have the mouse captured, so what gives?
On my OutlookBar on my site: WynApse.com, if you grab a button and start moving slowly it works fine, you let go of the mouse, things snap in place... coolness.
If you drag fast, the same thing happens, although it happens without you letting go of the mouse. But wait... the mouse up message *must* have come through, because the code isn't pooting...so what makes the mouse release early if you go too fast... guess I need to test that and see if the mouse up message actually hits ... I'll do that later this evening and tack the results onto here.
I've asked Jesse Liberty about this, and we made a deal... I ask here, he asks internally and we meet in the middle :)
So any goodness we come up with here I'll report to him, and vice verse....
Inquiring minds want to know...
-Dave
Silverlight MVP
http://www.wynapse.com
Justin-Josef...
Member
380 Points
114 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 01, 2008 07:57 AM | LINK
Dave,
This is wierd the online example isn't working as you described: http://www.wynapse.com/Silverlight/Silverlight1.0_OutlookBar.aspx but the download from http://www.wynapse.com/Silverlight/DesertCodeCampIIIBasicSilverlight.zip is working great.
"Fast moving mouse" is probably an issue with the mose leave event firing and messing things up. Maybe even the mouse enter event as the canvas moves on and then the mouse enters into it.
Have you tried debugging this and checking the order in which events are fired?
Here's a basic Trace method I use when debugging ad-hoc Javascript. Add some "trace('mouseEnter ' + sender.name);" all through your event handlers to see what order the events are fired.
<textarea cols=50 rows=50 id="TraceConsole"></textarea>
<script type="text/javascript">
function trace(mes)
{
document.getElementById("TraceConsole").value = document.getElementById("TraceConsole").value + '\r\n' + mes;
}
</script>
Justin-Josef Angel
Senior .Net consualtent,
Microsoft Most Valueable Proffesional
Website http://www.JustinAngel.Net
Blog http://blogs.Microsoft.co.il/blogs/JustinAngel
Cell (+972) 546-567789
Office (+972) 03-9504364
Email J@JustinAngel.Net
Got Silverlight 1.0 Javascript Intellisense? www.codeplex.com/intellisense
Got Silverlight 1.1 Hebrew & Arabic? www.codeplex.com/SilverlightRTL
aspdotnetjunkie
Member
458 Points
93 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 01, 2008 12:54 PM | LINK
I did not see any significant differences between the two so why are they acting differently. Also in the http://www.wynapse.com/Silverlight/DesertCodeCampIIIBasicSilverlight.zip when you drag really fast the positioning of the buttons gets all messed up. I'm looking into this myself, i'll post if I find anything.
Life's good
My Site
aspdotnetjunkie
Member
458 Points
93 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 01, 2008 01:11 PM | LINK
Ok I found it, it wasn't a mouse capture problem but a little bug. You just have to add "if (sender.mouseCapture())", I added this to the online example and works great now.
function onMouseLeave(sender, args){
// Change to deal with moving MouseEnter MouseLeave into the canvas //sender.findName(sender.Name + "Image").Source = "images/" + sender.findName(sender.Name + "Image").Tag + ".png"; // Addition to effectively assert mouse up when cursor exits button if(sender.mouseCapture()){
if (fIsMouseDowna){
PutButtonBacka(sender);
LiftMouseHelpera(sender);
}
}
}
Life's good
My Site
WynApse
Star
14658 Points
343 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 01, 2008 02:38 PM | LINK
Good catch!
I'll have to play with that a bit, but can't until I get home tonight.
I tried to post this morning, but my system got locked up again with twitter issues on someone else's site this time... last night it was mine :(
I was ready to point my finger at the volume of code being handled in the mouse move message.
I commented out the "PutButtonBack" and "LiftMouseHelper" and it worked fine, it's just that the mouse cursor got very out of sync with the location of the button. I could be near the bottom of the canvas moving up and down and the button would be near the top doing it's thing.
I'll reserve all judgement until I can test this, particularly with the code on my MasterPage.
Thanks! ...
-Dave
Silverlight MVP
http://www.wynapse.com
WynApse
Star
14658 Points
343 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 02, 2008 04:56 AM | LINK
Well, I've had a chance to look at this,and I'm not sure that fix is a fix.
I've scrounged through the documentation for SL 1.0, and I can't find mouseCapture() anywhere.
To check that thought, I went to my MouseDown function, and just after the sender.CaptureMouse(), I inserted this code:
if (sender.MouseCapture())
alert("MouseCapture");
and not only did I NOT get that message, but the function apparently aborted at that point, and indeed there is a JS error on that line.
So, I don't believe that function is valid, and may explain why the code 'works better' for you.
First let me explain my thought process from my 1 hour drive home:
The canvas for my OutlookBar is only as wide as the buttons. I did that so the buttons only move in one direction.. up and down. I tested last night and was not getting any rogue mouseenter messages, only the mouseleave. The codeblock in question is there for only one purpose, and that's to detect if the mouse goes off the button while being dragged, and that can happen 4 ways:
1) off the top of the canvas because the button is at the top, and you kept going, and now are in a weird state
2) same thing off the bottom
3 & 4) off the button to the left or right and in either case you are once again, off the canvas.
By testing if the sender of the mouseleave has the mouse captured you are really testing for these 4 states.
Consider what it means that the mouse is 'Captured' ... that object gets exclusive rights to the mouse events such as mouse move.
So we're tracking the mousemove, yet we find ourselves dealing with a mouseleave handler. That means that the mouse has exited the button that has captured the mouse... and how does that happen?
I believe it happens because I'm doing too much processing inside the mousemove handler... there's like 100 lines of code+comments in the mousemove and I'm pretty sure that's why we can get ahead of it.
Call me out on this if I'm wrong, or point me to where MouseCapture() is explained... I've been wrong lots, and this might me another :)
I don't consider this the end of the discussion, btw... I'm going to continue to play with the code.
-Dave
Silverlight MVP
http://www.wynapse.com
aspdotnetjunkie
Member
458 Points
93 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 04, 2008 12:34 PM | LINK
Now I'm a lost, you're right that is not a fix. I just took that line out and it didn't change anything it works the same. The mouse is 'captured' but as you mentioned before the mouse pointer gets out of sync with the buttons. I may play around with it some more once I find the time but right now it's good enough for what I'm using it for. Here is some documentation that I found http://msdn2.microsoft.com/en-us/library/bb980099.aspx .Hope this helps.
Life's good
My Site
WynApse
Star
14658 Points
343 Posts
Re: Drag and Drop as in Drop what your dragging too soon
Feb 04, 2008 05:22 PM | LINK
CaptureMouse() of course... but not MouseCapture() to check the status--I couldn't find that anywhere.
I didn't have time this weekend to look at that MouseMove code, but I'm pretty well convinced it's a case of putting 10 pounds into a 5 pound bag.
-Dave
Silverlight MVP
http://www.wynapse.com