Faire glisser une div dans jQuery – très bien lorsque la souris est lente, mais échoue lors d’un mouvement rapide

Je veux faire glisser une div en utilisant mon propre code jQuery.

Cet exemple sur jsfiddle fonctionne bien lorsque les mouvements de la souris sont lents

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

Mais tout mouvement rapide tire la souris hors de la boîte et le suivi est perdu.

jQuery UI draggable n’a pas ce problème et suit parfaitement quelle que soit votre vitesse de déplacement: http://jqueryui.com/demos/draggable/

Mais je veux lancer ma propre version simple pour pouvoir l’intégrer à Raphael, aux touches du clavier, etc. J’ai jeté un œil à la source déplaçable de jQuery UI mais c’est, pour moi, assez impénétrable (800 lignes).

Je ne pense pas que ce soit un problème avec l’événement bouillonnant … des idées?

Il y a 2 problèmes. La première est que vous annulez le glissement lorsque la souris quitte l’élément, vous ne voulez pas le faire. La seconde est que le déplacement de souris est uniquement sur la boîte, une fois que le curseur est sorti de la boîte, il ne sera plus en mesure d’exécuter le déplacement de souris. Vous pouvez stocker l’élément que vous faites glisser, puis append le déplacer de la souris à la page entière.

EDIT: En fait, je suppose que la souris doit également figurer sur le document au cas où vous lâcheriez le clic de la souris pendant un mouvement rapide et que votre curseur se trouvait en dehors de la zone. Mis à jour le jsfiddle.

Vois ici:

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