Page 1 sur 2
Un exemple de drag & drop : manipulation de groupes
Posté : 05 mars 2006, 02:58
par naholyr
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
Posté : 05 mars 2006, 10:06
par Cyrano
Pour info, un test rapide sous IE6 est fonctionnel, je n'ai eu aucun plantage particulier.
Posté : 05 mars 2006, 11:40
par pirquessa
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 ... ?
Posté : 05 mars 2006, 11:52
par Shrell
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

Posté : 05 mars 2006, 13:39
par naholyr
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

Posté : 05 mars 2006, 14:46
par Shrell
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

Posté : 05 mars 2006, 15:13
par naholyr
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.
Posté : 05 mars 2006, 16:01
par Shrell
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
Posté : 05 mars 2006, 19:28
par naholyr
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

Posté : 05 mars 2006, 20:24
par Shrell
sur Safari ça passe nickel

Posté : 05 mars 2006, 23:50
par HD
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

Posté : 06 mars 2006, 01:17
par fab
quel bonheur le javascript

Posté : 06 mars 2006, 01:20
par Lorenzo
sympa la démo !
Posté : 06 mars 2006, 12:52
par Lorenzo
je viens de tester avec le Konqueror de Kubuntu et le drag est impossible

Posté : 06 mars 2006, 14:10
par naholyr
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