Arrastrar una div en jQuery: bien cuando el mouse es lento, pero falla en el movimiento rápido del mouse

Question

Quiero arrastrar un div usando mi propio código jQuery.

Este ejemplo de jsFiddle funciona bien cuando los movimientos del ratón son lentos

http://jsfiddle.net/craic/kr7Un/

Pero cualquier movimiento rápido tira del ratón fuera de la caja y se pierde el seguimiento.

jQuery UI arrastrable no tiene este problema y hace un seguimiento muy bien, independientemente de la rapidez con que se mueve: http://jqueryui.com/demos/draggable/

Pero quiere rodar mi propia versión simple para que pueda integrarlo con Raphael, pulsaciones de teclas, He visto la fuente arrastrable de jQuery UI pero es, para mí, bastante impenetrable (800 líneas).

No creo que sea un problema con el evento burbujeante ... alguna idea?

Answer 1

Hay 2 problemas. Una es que estás cancelando el arrastre cuando el mouse deja el elemento, no quieres hacer eso. El segundo es que el mousemove está solo en la caja, una vez que el cursor está fuera de la caja, ya no va a ejecutar el mousemove. Puede almacenar el elemento que está arrastrando y luego agregar el mousemove a toda la página.

EDITAR: En realidad, supongo que el mouse también debería estar en el documento en caso de que suelte el clic del mouse durante un movimiento rápido y el cursor esté fuera del cuadro. Actualizado el jsfiddle.

Ver aquí:

http://jsfiddle.net/Jjgmz/1/

var box = $('#box'); 

box.offset({ 
    left: 100, 
    top: 75 
}); 

var drag = { 
    elem: null, 
    x: 0, 
    y: 0, 
    state: false 
}; 
var delta = { 
    x: 0, 
    y: 0 
}; 

box.mousedown(function(e) { 
    if (!drag.state) { 
     drag.elem = this; 
     this.style.backgroundColor = '#f00'; 
     drag.x = e.pageX; 
     drag.y = e.pageY; 
     drag.state = true; 
    } 
    return false; 
}); 


$(document).mousemove(function(e) { 
    if (drag.state) { 
     drag.elem.style.backgroundColor = '#f0f'; 

     delta.x = e.pageX - drag.x; 
     delta.y = e.pageY - drag.y; 

     $('#log').text(e.pageX + ' ' + e.pageY + ' ' + delta.x + ' ' + delta.y); 

     var cur_offset = $(drag.elem).offset(); 

     $(drag.elem).offset({ 
      left: (cur_offset.left + delta.x), 
      top: (cur_offset.top + delta.y) 
     }); 

     drag.x = e.pageX; 
     drag.y = e.pageY; 
    } 
}); 

$(document).mouseup(function() { 
    if (drag.state) { 
     drag.elem.style.backgroundColor = '#808'; 
     drag.state = false; 
    } 
});​