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

Question

I am working on a web application where I support dragging and dropping a page just by watching the mousedown / mousemove / mouseup events. This part works great.

The problem is that I only handle drag and drop inside one element, by design, and if the user (by accident or not) is dragged out, he "gets stuck" in drag and drop mode. That is, mouse-down, then mouse-window, then mouse, and then mouse returns to the window, it looks like it is still being dragged into my application.

I did not find a way to solve this - even something simple, like "when the mouse enters the window again, click down?" will work.

Is there such functionality, and I just skipped it? Or is there some kind of smart workaround that I can use here?

Legacy support doesn't matter 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 may find that the mouse was released outside the window 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 fires in the document when the mouse is released, even if the mouse pointer is outside the browser window. You can see this with http://www.quirksmode.org/dom/events/tests/click.html

For IE8, the document onmouseup event is fired when the mouse button is issued outside the browser window only if you enable the selection of the document (as the link above does). That is, in IE8, you do not receive the mouseup event if you use document.onselectstart and deselect, or if you use unselectable = "on" in the start element, or if you called document.selection.clear () in conjunction with document.selection .empty () while the mouse was not.

Answer 2

What if you had an onmouseout event on the element that triggered the mouseup event?

If you use only built-in handlers, something like strings:

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

any event handling code that you already use is added. This will “release” the drag whenever an item loses focus. Not the cleanest code, but you get the idea.