Email conversation
| From | Karl Marklund |
|---|
| To | Me |
|---|
| Subject | Generic dragable layer - design detail |
|---|
| Date | 8 April 2007 12:06 |
|---|
First - thanks for sharing your code and knowledge!
I wanted to learn some more JS and thought that implementing a
dragable layer library would be a nice challange. My initial design
suffered from the cursor-escapes-dragable-element syndrome as I've
described here:
[URL]
My guess was that it probably had something to do with the cursor
position being updated faster than the position of the dragable
element.
I've found several tutorials on dragable/movable layers/divs but none
of these made any comments about this design detail.
After doing some more research I found your reply:
http://www.howtocreate.co.uk/jslibs/script-draglayer and I hope you
can help me understand in more detail why this cursor-runaway happens.
I realize that I probably don't gain much in performance by not
register the 'mousemove' handler for the whole document but only for
individual elements. Anyway, It would be nice to understand why this
cannot be done.
Kind regards,
Karl Marklund
| From | Me |
|---|
| To | Karl Marklund |
|---|
| Subject | Re: Generic dragable layer - design detail |
|---|
| Date | 8 April 2007 16:17 |
|---|
Karl,
> as I've described here:
> [URL]
I am guessing you made a mistake with that example. The arguments on the
first version should be (el,'mousemove',OnMouseMove)
> Anyway, It would be nice to understand why this
> cannot be done.
This is basically a limitation produced by the way that operating systems
handle mouse movements. They do not register the movement every time it
moves a single pixel. Instead, they incrementally poll for movements after
small time interval. The operating system then passes these movements to the
browser. This situation is made worse if the operating system uses mouse
acceleration (most do this), or if the CPU is slower.
Depending on how fast you move the mouse, it may move only one pixel in each
interval, but it may move as much as a couple of hundred pixels for a fast
movement. If the movement is enough to place the new cursor position outside
the dragable element, then it cannot be registered as a mousemove on the
element itself, and instead is registered as a mouseout event.
As you have discovered, the only reliable way to do it is to register the
mousemove event on the document itself, so even if the pointer moves outside
the dragable element, the script can still see its new position (assuming it
remains over the document).
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Karl Marklund |
|---|
| To | Me |
|---|
| Subject | Re: Generic dragable layer - design detail |
|---|
| Date | 8 April 2007 17:06 |
|---|
Thanks for the rapid response!
> I am guessing you made a mistake with that example.
Yes you are right, I somehow missed to see this myself :-)
> Instead, they incrementally poll for
> movements after small time interval.
Interesting, most often you don't (have to?) think about the OS when
developing within a browser.
This got me thinking...the same situation must exist when you develop
on top of any window manager (for example X11). I'have newer
developed on that "low" level but I guess you don't register a
mousemove event handler per widget if you want to avoid the escaping
cursor symptom.
> If the movement is enough to place the new cursor
> position outside the dragable element, then it cannot be registered as a
> mousemove on the element itself
I see, I kind of learned this the hard way :-)
> As you have discovered, the only reliable way to do it is to register
> the mousemove event on the document itself
I'm the kind of person who like to know why things are done in a
particular way. Thank you for helping me understand the inner workings
of the mousemove event.
Maybe this is common knowledge/practice among JS developers, but I
find it a little strange that this is not mentioned in the tutorials
on dragable layers/divs I've come across.
Once again I would like to thank you for a great JS resource,
~ karl