div - mousemove jquery

Arrastrando una Div en jQuery: está bien cuando el mouse es lento, pero falla en el movimiento rápido del mouse

Question

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

Este ejemplo en jsfiddle funciona bien cuando los movimientos del mouse son lentos.

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

Pero cualquier movimiento rápido saca el mouse de la caja y el seguimiento se pierde.

jQuery UI draggable no tiene este problema y sigue bien sin importar qué tan rápido te muevas: http://jqueryui.com/demos/draggable/

Pero quiero rodar mi propia versión simple para poder integrarla con Raphael, pulsaciones de teclas, etc. He visto la fuente arrastrable de la interfaz de usuario de jQuery pero, para mí, es bastante impenetrable (800 líneas).

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

Answer 1

Hay 2 temas. Una es que está cancelando el arrastre cuando el mouse abandona el elemento, no quiere hacer eso. La segunda es que el mousemove está solo en la casilla, una vez que el cursor está fuera de la caja ya no se 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, creo que el mouseup también debería estar en el documento en caso de que sueltes el botón del mouse durante un movimiento rápido y tu cursor esté fuera de la caja. Actualizado el jsfiddle.

Mira 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;
}
});​