HTML DOM drag-n-drop: what about when mouse leaves window?

Question

I'm working on a web app where I support dragging on the page, by simply watching for mousedown/mousemove/mouseup events. That part works great.

The problem is that I'm only handling dragging inside one particular element, by design, and if a user (accidentally or not) drags outside, it gets "stuck" in drag mode. That is, mouse-down, then mouse-leaves-window, then mouse-up, then mouse-returns to window looks like it's still dragging, to my app.

I haven't figured out any way to solve this -- even something simple like "when the mouse re-enters the window, is the mouse button down?" would work.

Does such functionality exist, and I'm just missing it? Or is there some clever workaround I can employ here?

Legacy support has no importance to me -- if it's an HTML5 solution that only works in FF3.5/Chr4/Sf4, I'm happy with that.

Answer 1

What if you had the onmouseout event of the element fire the mouseup event?

If you're just using inline handlers, something along the lines of:

<div id='dragElement' onmouseup='alert("stop dragging!")' onblur='this.onmouseup();'></div>

added to whatever event handling code you're already using. This would 'release' the drag whenever the element loses focus. Not the cleanest code, but you get the idea.