Glisser une division dans jQuery - bien quand la souris est lente, mais échoue sur le mouvement rapide de la souris

J'ai envie de glisser un div autour de l'aide de 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 en dehors de la boîte et le suivi est perdu.

jQuery UI déplaçable n'ont pas ce problème et les pistes de l'amende juste peu importe à quelle vitesse vous vous déplacez: http://jqueryui.com/demos/draggable/

Mais je veux rouler ma propre version, plus simple, de sorte que je puisse l'intégrer avec Raphaël, des touches, etc. J'ai regardé le jQuery UI déplaçable source, mais il est, pour moi, assez impénétrable (800 lignes).

Je ne pense pas que c'est un problème de remontée d'événements... des idées?

source d'informationauteur craic.com

  1. 32

    Il y a 2 problèmes. L'une est que vous êtes l'annulation de la glisser lorsque la souris quitte l'élément, vous ne voulez pas le faire. La 2ème est que l'événement mousemove est seulement sur la boîte, une fois que le curseur est en dehors de la boîte, il ne va plus pour exécuter l'événement mousemove. Vous pouvez stocker l'élément qui vous sont les faisant glisser, puis ajouter le mousemove de l'ensemble de la page à la place.

    EDIT: en Fait, je suppose que le mouseup devrait vraiment être également sur le document, juste au cas où vous relâchez le clic de la souris lors d'un mouvement rapide et votre curseur se trouve à l'extérieur de la boîte. Mis à jour le jsfiddle.

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