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

In IE7/IE8 you can detect if the mouse was released outside the window by using the following code:

document.onmousemove = function(event) {
    event = event || window.event;
    if (document.all && event.button != 1) {
        canceldragging();
    }
}

In Firefox and Webkit the mouseup event is fired on the document when the mouse is released even if mouse pointer outside the browser window. You can see this using http://www.quirksmode.org/dom/events/tests/click.html

For IE8 the document onmouseup event is fired when the mouse button is released outside the browser window only if you allow document selection to occur (as the link above does). That is, in IE8 you don't get the mouseup event if you use document.onselectstart and cancel the selection, or if you use unselectable="on" on the starting element, or if you called document.selection.clear() combined with document.selection.empty() while the mouse was down.

Answer 2

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.