Un exemple de drag & drop : manipulation de groupes

05 mars 2006, 02:58

Voici un premier jet d'un des modules d'un projet en cours.
Il s'agit d'une interface enrichie pour la gestion des groupes, on y définit les classes pour manipuler les groupes, et la gestion du drag & drop.

La démo se trouve ici
Ici la version utilisant scriptaculous (sans doute moins gourmande)

Pour ne pas avoir à créer de 0 votre groupe, vous pouvez cliquez sur "restore from string" et copier-coller cette chaine :

Code : Tout sélectionner

['Root',[['Membre',['user1','user5',['Modo',['user3-modo','user2-modo',['Admin',['user0-admin']]]],['Membre Special',['user4-special']]]],'guest1','guest2']]

La doc suivra (un jour...).

Comme c'est encore un peu buggé, il arrive que les éléments en fassent un peu à leur tête, dans ce cas forcer le rafraichissement avec "render again".

Compatibilités :

MSIE 7 facheuse tendance à planter méchamment. Je mets ça sur le compte de la version beta d'IE (et du coup je n'ai pas d'autre version d'IE sous la main)
Firefox 1.x OK
Opera 8.52 OK
Safari (dernière version) OK

05 mars 2006, 10:06

Pour info, un test rapide sous IE6 est fonctionnel, je n'ai eu aucun plantage particulier.

05 mars 2006, 11:40

Je vois pas trop a quoi ca sert, mais c'est puissant ton truc la...
Je suis impressioné ...

C'est que JS ou il y a AJAX ect ... ?

05 mars 2006, 11:52

Je me suis servi de ça pour un drag&drop, ça permet pas mal de choses...
Si il y en a que ça intéresse

05 mars 2006, 13:39

Ce n'est que du JS, je n'ai pas fait de lien côté serveur, mais bien sûr qu'au final cela doit effectuer des modifications sur une base de données, et donc intégrer l'Ajax (rien de bien méchant).

Du coup tout est dans la source de la page, vous pouvez vous balader.

Pour la librairie de drag & drop j'ai voulu utiliser la librairie de Yahoo! qui est vraiment excellemment bien ficelé, mais qui ne fonctionne pas avec Opera

Du coup j'utilise wz_dragdrop mais qui n'est que très peu développé sur un modèle objet/évènement propre, et sur lequel j'ai donc appliqué un début de surcouche (sous la forme de mon "dragdrop.js" inclus juste après "wz_dragdrop.js"), que je peaufinerai pour obtenir un fini approchant la librairie de Yahoo!.

La librairie de script.aculo.us a l'air sympathique, et je n'ai pas trouvé d'incompatibilité. À voir si l'API est intéressante merci du lien

05 mars 2006, 14:46

personnellement j'avais aussi essayé de créer mon propre systeme de drag & drop mais je dois avouer que je suis vite arrivé à une usine à gaz qui a encore quelques incompatibilités selon les navigateurs...

Le système de script.aculo.us est en plus non intrusif, on définit après création de la page quelles sont les zones de dépot etc... je pense ne pas avoir exploité toutes les possibilités mais c'est vrai que ça a l'air vraiment très puissant!

En plus le drag & drop sur le web, c claaaaaasse

05 mars 2006, 15:13

La question est intéressante, parce que le drag&drop c'est classe, mais il faut bien refléchir à son utilité

J'ai l'exemple de ce site où ce n'est qu'un gadget qui est en plus beaucoup moins efficace qu'une traditionnelle navigation par lien (à la rigueur un effet de slider aurait été sympa et bien plus fonctionnel).

J'avais pensé à une application sympa, c'est dans un jpc pour équiper son personnage, en glissant les objets du sac vers l'emplacement.

05 mars 2006, 16:01

En effet, niveau navigabilité c'est pas top... moi je m'en suis servi pour faire de la sélection de photos (1 principale et trois annexes parmi un nombre indéterminé)
J'avais envisagé de le faire par des boutons radios mais c'était impossible, donc finalement on glisse les photos qu'on veut dans les bonnes cases, et c'est parfait!
en plus d'être classe, c'est utile

Edit : d'ailleurs sur le site que tu cites (hihihi... pardon je m'égare

) ils utilisent script.aculo.us

05 mars 2006, 19:28

Ici la version utilisant scriptaculous

La programmation est vraiment plus agréable, à l'instar de la bibliothèque de Yahoo!. Par contre question compatibilité c'est pas glorieux : il y a un problème de positionnement avec Opera (quand on prend un item et qu'on le drop dans le vide, il ne revient pas à sa bonne place), et IE7 ne drag&drop plus rien dès la première manip' (là encore, il faudrait pouvoir tester avec IE6).

Je n'ai pas pu tester sous Safari. Mais il y a déjà un boulot de correction de la librairie à effectuer pour Opera

05 mars 2006, 20:24

sur Safari ça passe nickel

05 mars 2006, 23:50

Pour info, un test rapide sous IE6 est fonctionnel, je n'ai eu aucun plantage particulier.

désolé mais chez moi (ie6) quand j'utilise la chaîne de naholyr, le groupe apparaît mais après plus rien ne répond sur la page et un terminer maintenant fait redémarrer ie

06 mars 2006, 01:17

quel bonheur le javascript

06 mars 2006, 01:20

sympa la démo !

06 mars 2006, 12:52

je viens de tester avec le Konqueror de Kubuntu et le drag est impossible

06 mars 2006, 14:10

je viens de tester avec le Konqueror de Kubuntu et le drag est impossible

Laquelle ? La 1e version ou la deuxième (la version scriptaculous, qui se targue d'avoir un très haut niveau de compatibilité).

PS: j'ai pu corriger le bug du décalage sous Opera, cf. http://dev.rubyonrails.org/ticket/4092

Un exemple de drag & drop : manipulation de groupes

Qui est en ligne