UI Draggable, comment annuler l'action avec la touche « escape » ?

Version imprimable

Bonjour à tous !
J'ai besoin d'un ptit coup de main sur JQuery UI.

Voila je suis en train de faire un appli avec des div DROPPABLE et d'autres DIV Draggable.
Je souhaites lorsque l'on déplace un DIV (donc DRAGGABLE), pouvoir annuler l'action sur la touche ESC.

Voici le code du DIV DRAGGABLE :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $j("#" + numero).draggable({ cursor: 'crosshair', opacity: 0.8, drag: function(event, ui) { $j(this).keydown(function(event) { if (event.keyCode == 27) { $j("#" + numero).stop(); } }); } });
le stop ne fonctionne pas, j'arrive à détecter la touche ESC pendant le déplacement du DIV, je souhaite qu'elle se repositionne et annule l'action en cours.

Merci pour votre aide.

08/02/2010, 10h18
Sourrisseau

Pour qu'un
évènement keydown ou keypress sot intercepté il faut que l'élément est le focus. Grosso modo ces évènements sont utilisées par exemple sur des champs input de type text ou les textarea.

Je vais regarder mais je ne crois pas que cela marche sur d'autres éléments comme une div. Concernant le retour de ta div a sa position initial , tu peux utiliser la fonction :
Code:

1 2 $j("#" + numero).draggable('option', 'revert', true);
Mais une fois le retour fait il ne faut oublier de passer l'option a false.

ok cela ne semble pas fonctionner....

Mais j'ai peut être trouvé une solution intermédiaire

Je rajoute un attr au DIV :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
                $j("#" + numero).draggable({
                    cursor: 'crosshair',
                    opacity: 0.8,
                    start: function(event, ui) {
                        $j("#" + numero).attr("actiondrag", "0");
                    },
                    drag: function(event, ui) {
                        $j(this).keydown(function(event) {
                            if (event.keyCode == 27) {
                                $j("#" + numero).attr("actiondrag", "1");
                                $j("#" + numero).draggable('option', 'revert', true);
                            }
                        });
                    }
                });

Ensuite dans le droppable je test si l'attr est bien = 0, et il ne se passe rien.
Cela semble fonctionner comme ca.

11/02/2010, 16h04
boutmos

Réglé ??

Sinon je suis retombé sur un exemple de réinitialisation d'une DIV draggable :

http://jqueryui.com/demos/droppable/#revert

l'evenement de reset se produit sur un mouseUp je pense pas que cela soit très difficile de l'associer a la touche escape.