Discussion :

[beworld]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Sourrisseau]

é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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$j("#" + numero).draggable('option', 'revert', true);

Mais une fois le retour fait il ne faut oublier de passer l'option a false.

[beworld]

ok cela ne semble pas fonctionner....

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

Je rajoute un attr au DIV :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.