HTML DOM drag-n-drop: ¿qué pasa cuando el mouse sale de la ventana?

Question

Estoy trabajando en una aplicación web donde soporto arrastrar en la página, simplemente observando los eventos mousedown/mousemove/mouseup. Esa parte funciona genial.

El problema es que solo estoy manipulando el arrastre dentro de un elemento en particular, por diseño, y si un usuario (accidentalmente o no) se arrastra afuera, se "atasca" en el modo de arrastre. Es decir, mouse-down, luego mouse-leaves-window, luego mouse-up, luego mouse-returns a window parece que todavía está arrastrando, a mi aplicación.

No he encontrado ninguna forma de resolver esto, incluso algo tan simple como "cuando el mouse vuelve a entrar en la ventana, ¿el botón del mouse está hacia abajo?" trabajaría.

¿Existe tal funcionalidad y me falta? ¿O hay alguna solución inteligente que pueda emplear aquí?

El soporte heredado no tiene importancia para mí, si se trata de una solución HTML5 que solo funciona en FF3.5/Chr4/Sf4, estoy contento con eso.

Answer 1

¿Qué sucede si el evento onmouseout del elemento activa el evento mouseup?

Si sólo está utilizando controladores de línea, algo a lo largo de las líneas de:

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

añade a lo que el manejo de eventos código que ya está usando. Esto 'liberaría' el arrastre cada vez que el elemento pierda el foco. No es el código más limpio, pero entiendes la idea.

Answer 2

En IE7/IE8 puede detectar si el ratón fue lanzado fuera de la ventana con el siguiente código:

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

En Firefox y Webkit caso mouseup se dispara en el documento cuando se suelta el ratón, incluso si el puntero del mouse fuera de la ventana del navegador. Esto se puede ver usando http://www.quirksmode.org/dom/events/tests/click.html

para IE8 documento onmouseup evento se activa cuando el botón del ratón es liberado fuera de la ventana del navegador solamente si usted permite que se produzca la selección de documentos (como el enlace anterior). Es decir, en IE8 no obtiene el evento mouseup si usa document.onselectstart y cancela la selección, o si usa unselectable = "on" en el elemento inicial, o si llamó a document.selection.clear() combinado con document.selection.empty() mientras el mouse estaba abajo.